无法绑定到“routerLink”，因为它不是已知的本机属性[重复]
Posted
技术标签:
【中文标题】无法绑定到“routerLink”，因为它不是已知的本机属性[重复]【英文标题】：Can't bind to 'routerLink' since it isn't a known native property [duplicate] 【发布时间】：2016-09-05 19:45:44 【问题描述】：是的，这可能是某人第 100 次遇到此问题，但没有任何解决方案适合我...
我正在使用 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 资产中没有 routes 文件夹。因此它不会知道它是有道理的 - 但是项目文件中的 node_modules 在那里，它在 systemjs.config.js 中指定，就像任何其他模块一样......
【问题讨论】：
您正在使用来自 main.ts 上的路由器的 ROUTER_PROVIDERS 和来自 app.component.ts 上不推荐使用的路由器的 ROUTER_PROVIDERS。尝试用户弃用两者。 没有区别.. 只添加一次ROUTER_PROVIDERS。
在您的实际代码中，是 <a routerLink="...">...</a> 不是 <a [routerLink]="...">...</a> 吗？因为，1-这是错误的，2-它不会在您的问题中抛出错误，因为没有绑定。这意味着错误在其他地方
我刚刚克隆了你的仓库。你的打字稿代码很好。但它没有被编译成javascript。只需编译它。还要在index.html 中添加<base href="/">，你就可以开始了
【参考方案1】：
他们已弃用 RC2 路由器：http://angularjs.blogspot.com.au/2016/06/improvements-coming-for-routing-in.html
我使用的是 3.0.0-alpha.7 版本。
根据他们的example我还做了一个app.routes.ts文件：
import provideRouter, RouterConfig from '@angular/router';
import FooComponent, BarComponent, BazComponent from './components/bunchOComponents.ts'
export const routes: RouterConfig = [
path: 'foo', component: FooComponent ,
path: 'bar', component: BarComponent ,
path: 'baz', component: BazComponent
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
然后我在我的 main.ts 文件中使用了它：
import bootstrap from '@angular/platform-browser-dynamic';
import AppComponent from './components/appcomponent.ts';
import APP_ROUTER_PROVIDERS from './app.routes';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));
HTH
【讨论】：
【参考方案2】：Angular 需要在属性名称周围加上[...] 来表明它是一个需要解析的绑定。值中的 [...] 只是为了让 Angular 将分配的值解析为数组。
<a [routerLink]="['/login']">login</a>
<a [routerLink]="['/home']">home</a>
这并不能解释您收到的错误消息，因为错误消息表明绑定到不存在的属性，而我的更正是让 Angular 实际执行绑定。
【讨论】：
我尝试了两种方法，没有任何效果..它甚至没有加载@angular/router【参考方案3】：由于 RC.0 Angular 将路由器更改为新的实现，这意味着网上提供的很多示例都是旧路由器的。
如果您使用的是@RouteConfig，那就是旧路由器。
也就是@angular/router-deprecated
新路由器使用@Routes，可从@angular/router获得
否则ROUTER_DIRECTIVES和ROUTER_PROVIDERS的导入是一样的。
版本之间的其他重要更改是。
新路由器不支持命名路由。
路线
之前：
import RouteConfig from '@angular/router-deprecated';
@RouteConfig([
path: '/myroute/:id', component: MyRoute, name: 'MyRoute'
])
之后：
import Routes from '@angular/router';
@Routes([
path: '/myroute/:id`, component: MyRoute
])
路由器链接
routerLink 指令也发生了变化，不再将对象作为第二个参数来指定路径变量，例如id
之前：
<a routerLink="['MyRoute', id: 1]">Link</a>
之后：
<a routerLink="['/myroute', 1]">Link</a>
【讨论】：
我将问题更新为仅使用新路线，但仍然没有任何效果。以上是关于无法绑定到“routerLink”，因为它不是已知的本机属性[重复]的主要内容，如果未能解决你的问题，请参考以下文章
无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]
模板解析错误：无法绑定到“routerLink”，因为它不是“a”的已知属性 [重复]
无法绑定到“routerLink”，因为它不是已知的本机属性[重复]
无法绑定到“routerLink”，因为即使在导入 RouterModule 之后它也不是已知属性