是的，这可能是有人第一百次遇到这个问题，但没有解决方案对我有用......
我正在使用 Angular 2.0.0 rc，但没有任何效果，我想我错过了一些东西，但我不知道是什么
这是我的文件，它们都可以正确转换，是的，我尝试使用未弃用的路线，是的，我根据文档进行了操作，但两者都不起作用。
app.component.ts
import { Component, OnInit } from '@angular/core';
import {Routes, Router, ROUTER_DIRECTIVES} from '@angular/router';
import {LoginComponent} from './login/login.component';
import {HomeComponent} from './home/home.component';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<nav>
<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>
</nav>
<router-outlet></router-outlet>
`, directives: [ROUTER_DIRECTIVES]
})
@Routes([
{ path: '/login', component: LoginComponent},
{ path: '/home', component: HomeComponent},
])
export class AppComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
this.router.navigate(['/home']);
}
}
main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router';
import { AppComponent } from './components/app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
其余文件几乎都是教程中的复制粘贴，因此我不会发送更多代码......
更新，我要补充一点，由于某种原因，npm 日志不会向 @angular/routes-deprecated/... 发送 GET 请求，但它们确实将其发送到其他模块。 但是它包含在 package.json 和 systemjs.config.js 中
我想我知道问题是什么，但我不确定是什么原因造成的
如您所见，chrome 资源中没有路由文件夹。因此，它不会知道它是有道理的 - 然而项目文件中的node_modules在那里，它像任何其他模块一样在systemjs.config.js中指定......
最佳答案
Angular 需要在属性名称周围添加 [...] 来指示它是需要解析的绑定(bind)。值中的 [...] 只是为了让 Angular 将分配的值解析为数组。
<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>
这并不能解释您收到的错误消息，因为错误消息指示绑定(bind)到不存在的属性，而我的更正是让 Angular 实际执行绑定(bind)。
关于javascript - 无法绑定(bind)到 'routerLink'，因为它不是已知的 native 属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37145164/