不能绑定到'routerLink'，因为它不是已知的原生属性

显然，Angular2的beta版本比新版本更新，所以没有太多的信息，但我正在尝试做一些我认为相当基本的路由。

通过快速启动代码和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 { }

routing-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后，路由器链接指令被破坏。然而，其中一个答案中的“工作示例”是基于预测试代码的-它可能仍然工作，但我想知道为什么我创建的代码不能工作。

任何建议都将不胜感激!

当前回答

使用Visual Studio编码时的警告(2013)

我已经浪费了4到5个小时来调试这个错误。我尝试了我在StackOverflow上找到的所有解决方案，但我仍然得到这个错误:不能绑定到“routerlink”，因为它不是一个已知的本机属性

注意，当你复制/粘贴代码时，Visual Studio有自动格式化文本的坏习惯。我总是从VS13得到一个小的瞬时调整(驼峰情况消失)。

这样的:

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

就变成:

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

这是一个很小的差异，但足以触发错误。最糟糕的是，每次我复制粘贴的时候，这个小差异总是避开我的注意。一次偶然的机会，我发现了这个小差异，并解决了它。

2016-07-30 12:59:36

其他回答

在你们的模块中

import {Routes, RouterModule} from '@angular/router';

你必须导出模块RouteModule

例子:

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

能够访问的功能，为所有谁导入这个模块。

2017-03-07 22:43:33

对于>= V5

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
    {path:'routing-test', component: RoutingTestComponent}
];

@NgModule({
    imports: [
    RouterModule.forRoot(appRoutes)
    // other imports here
    ]
})

组件:

@Component({
    selector: 'my-app',
    template: `
        <h1>Component Router</h1>
        <a routerLink="/routing-test" routerLinkActive="active">Routing Test</a>
        <router-outlet></router-outlet>
        `
})

对于< V5

也可以使用RouterLink作为一个指令。指示:[RouterLink]。这对我很有用

import {Router, RouteParams, RouterLink} from 'angular2/router';

@Component({
    selector: 'my-app',
    directives: [RouterLink],
    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},
])

2016-03-23 12:52:01

如果在单元测试时出现这个错误，请这样写。

import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
  });
}));

2018-12-24 11:36:27

使用Visual Studio编码时的警告(2013)

注意，当你复制/粘贴代码时，Visual Studio有自动格式化文本的坏习惯。我总是从VS13得到一个小的瞬时调整(驼峰情况消失)。

这样的:

<div>
    <a [routerLink]="['/catalog']">Catalog</a>
    <a [routerLink]="['/summary']">Summary</a>
</div>

就变成:

<div>
    <a [routerlink]="['/catalog']">Catalog</a>
    <a [routerlink]="['/summary']">Summary</a>
</div>

2016-07-30 12:59:36

上面提到的所有方法我都试过了。但没有一种方法对我有效。最后，我得到了上述问题的解决方案，它是为我工作。

我尝试了这个方法:

在Html中:

<li><a (click)= "aboutPageLoad()"  routerLinkActive="active">About</a></li>

TS文件:

aboutPageLoad() {
    this.router.navigate(['/about']);
}

2016-08-12 06:19:32

不能绑定到'routerLink'，因为它不是已知的原生属性

推荐文章

最新文章

标签