เห็นได้ชัดว่าเบต้าของ Angular2 นั้นใหม่กว่าใหม่ดังนั้นจึงไม่มีข้อมูลมากนัก แต่ฉันพยายามทำในสิ่งที่ฉันคิดว่าเป็นเส้นทางขั้นพื้นฐานพอสมควร
การแฮ็กข้อมูลด้วยโค้ดเริ่มต้นอย่างรวดเร็วและตัวอย่างอื่น ๆ จากเว็บไซต์https://angular.ioส่งผลให้โครงสร้างไฟล์ต่อไปนี้:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
ด้วยไฟล์ที่มีประชากรดังนี้:
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 { }เส้นทาง-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 { }การพยายามเรียกใช้รหัสนี้ก่อให้เกิดข้อผิดพลาด:
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
ฉันพบปัญหาที่เกี่ยวข้องอย่างคลุมเครือที่นี่; สั่งเราเตอร์ลิงค์เสียหลังจากการอัพเกรด angular2.0.0-beta.0 อย่างไรก็ตาม "ตัวอย่างการทำงาน" ในหนึ่งในคำตอบนั้นขึ้นอยู่กับโค้ด pre-beta ซึ่งอาจยังใช้งานได้ดี แต่ฉันอยากจะรู้ว่าทำไมรหัสที่ฉันสร้างขึ้นไม่ทำงาน
พอยน์เตอร์ใด ๆ จะได้รับสุดซึ้ง!
ฉันได้รับข้อผิดพลาดเดียวกันแม้กับ ROUTER_DIRECTIVE
—
ฟิล
@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
ด้วยการเพิ่ม
—
ฟิล
directives: [ROUTER_DIRECTIVES]และเปลี่ยนจาก [router-link] เป็น [routerLink] ฉันไม่ได้รับข้อผิดพลาดอีกต่อไป
directives: [ROUTER_DIRECTIVES].