hannahhoward / a1atscript

The Angular 2 Polyfill
MIT License
101 stars 7 forks source link

ng-link directive does not work with @RouteConfig blocks #27

Open lily-mara opened 9 years ago

lily-mara commented 9 years ago

I tried to add some links to your router example in the readme. This is what I ended up with:

@Component({})
@View({
  template: "<p>Sub</p>"
})
class SubComponent {

}

@Component({})
@View({
  template: "<p>Home</p><ng-viewport></ng-viewport>"
})
@RouteConfig({
  path: "/sub", component: SubComponent
})
class HomeComponent {
}

// the AsModule annotation is an extra need to setup Angular's module system on the top level component for now
@AsModule('App', ['ngNewRouter', HomeComponent, SubComponent])
@Component({
  selector: "awesome"
})
@View({
  template: `
        <a ng-link="sub">sub</a>
        <a router-link="home">home</a>
        <ng-viewport></ng-viewport>
    `
})
@RouteConfig({
  path: "/home", component: HomeComponent
})
class AppComponent {
}

bootstrap(AppComponent)

Notice the ng-link and router-link in the AppComponent template. I wasn't sure what the correct directive name was. This seems to line up with the official documentation, but when I load the page, the ng-link has an href of "." and therouter-link has no href. Is there something wrong with the way I'm using these directives, or is a1atscript doing something unexpected with the RouteConfig?

xmlking commented 9 years ago

+1, I guess we my have to Inject ng-link into Component!