Rõ ràng bản beta cho Angular2 mới hơn bản mới, vì vậy không có nhiều thông tin ngoài đó, nhưng tôi đang cố gắng thực hiện những gì tôi nghĩ là một số định tuyến khá cơ bản.
Việc hack về mã bắt đầu nhanh và các đoạn mã khác từ trang web https://angular.io đã dẫn đến cấu trúc tệp sau:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
Với các tệp được điền như sau:
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 { }
định tuyến-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 { }
Cố gắng chạy mã này tạo ra lỗi:
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
Tôi tìm thấy một vấn đề mơ hồ liên quan ở đây; các chỉ thị liên kết bộ định tuyến bị hỏng sau khi nâng cấp lên angular2.0.0-beta.0 . Tuy nhiên, "ví dụ hoạt động" trong một trong các câu trả lời dựa trên mã pre-beta - có thể vẫn hoạt động, nhưng tôi muốn biết lý do tại sao mã tôi đã tạo không hoạt động.
Bất kỳ con trỏ sẽ được biết ơn nhận được!
Tôi nhận được cùng một lỗi ngay cả với ROUTER_DIRECTIVES.
—
phil
@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
Với việc bổ sung
—
phil
directives: [ROUTER_DIRECTIVES]và thay đổi từ [liên kết bộ định tuyến] sang [bộ định tuyến] tôi không còn gặp phải lỗi này nữa.
directives: [ROUTER_DIRECTIVES].