无法绑定到“routerLink”，因为它不是已知的本机属性[重复]答案

【问题标题】：Can't bind to 'routerLink' since it isn't a known native property [duplicate]无法绑定到“routerLink”，因为它不是已知的本机属性[重复]
【发布时间】：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="/">，你就可以开始了

标签： javascript routing angular

【解决方案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>

【讨论】：

我将问题更新为仅使用新路线，但仍然没有任何效果。