Obviamente, la versión beta de Angular2 es más nueva que nueva, por lo que no hay mucha información disponible, pero estoy tratando de hacer lo que creo que es una ruta bastante básica.
Hackear con el código de inicio rápido y otros fragmentos del sitio web https://angular.io ha dado como resultado la siguiente estructura de archivos:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
Con los archivos que se rellenan de la siguiente manera:
index.html
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<link href="../css/bootstrap.css" rel="stylesheet">
<!-- 1. Load libraries -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component'
bootstrap(AppComponent, [
ROUTER_PROVIDERS
]);
app.component.ts
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy} from 'angular2/router';
import {RoutingTestComponent} from './routing-test.component';
@Component({
selector: 'my-app',
template: `
<h1>Component Router</h1>
<a [routerLink]="['RoutingTest']">Routing Test</a>
<router-outlet></router-outlet>
`
})
@RouteConfig([
{path:'/routing-test', name: 'RoutingTest', component: RoutingTestComponent, useAsDefault: true},
])
export class AppComponent { }
routing-test.component.ts
import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
@Component({
template: `
<h2>Routing Test</h2>
<p>Interesting stuff goes here!</p>
`
})
export class RoutingTestComponent { }
Intentar ejecutar este código produce el error:
EXCEPTION: Template parse errors:
Can't bind to 'routerLink' since it isn't a known native property ("
<h1>Component Router</h1>
<a [ERROR ->][routerLink]="['RoutingTest']">Routing Test</a>
<router-outlet></router-outlet>
"): AppComponent@2:11
Encontré un problema vagamente relacionado aquí; directivas de enlace de enrutador rotas después de actualizar a angular2.0.0-beta.0 . Sin embargo, el "ejemplo de trabajo" en una de las respuestas se basa en el código pre-beta, que bien podría funcionar, pero me gustaría saber por qué el código que he creado no funciona.
Cualquier sugerencia sería recibida con gratitud!
directives: [ROUTER_DIRECTIVES]
.@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
directives: [ROUTER_DIRECTIVES]
y el cambio de [router-link] a [routerLink] ya no obtengo el error.