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

任何建议都将不胜感激!

当前回答

对于>= 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

其他回答

如果你使用共享模块，只需将RouterModule添加到声明了你的组件的模块中，不要忘记添加<router-outlet></router-outlet>

此处引用的RouterLink不起作用

2018-05-09 15:42:56

> = RC.5

导入RouterModule 参见https://angular.io/guide/router

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

> = RC.2

app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';

export const routes: RouterConfig = [
  ...
];

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

main.ts

import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [APP_ROUTER_PROVIDERS]);

< = RC.1

你的代码丢失了

  @Component({
    ...
    directives: [ROUTER_DIRECTIVES],
    ...)}

你不能使用routerLink或router-outlet这样的指令，而不让组件知道它们。

虽然在Angular2中指令名称被修改为区分大小写，但元素仍然在名称中使用-，如<router-outlet>，以兼容web组件规范，在自定义元素的名称中要求使用-。

在全球范围内注册

要使ROUTER_DIRECTIVES全局可用，将这个提供者添加到bootstrap(…):

provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})

那么就不需要再给每个组件添加ROUTER_DIRECTIVES了。

2015-12-16 17:00:46

对于>= 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

在我的例子中，我在App模块中导入了RouterModule，但在我的feature模块中没有导入。在我的EventModule中导入路由器模块后，错误就消失了。

    import {NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {EventListComponent} from './EventList.Component';
    import {EventThumbnailComponent} from './EventThumbnail.Component';
    import { EventService } from './shared/Event.Service'
    import {ToastrService} from '../shared/toastr.service';
    import {EventDetailsComponent} from './event-details/event.details.component';
    import { RouterModule } from "@angular/router";
    @NgModule({
      imports:[BrowserModule,RouterModule],
      declarations:[EventThumbnailComponent,EventListComponent,EventDetailsComponent],
      exports: [EventThumbnailComponent,EventListComponent,EventDetailsComponent],
       providers: [EventService,ToastrService]
    })
    export class EventModule {
        
     }

2017-06-05 01:55:19

一般来说，当你得到一个像不能绑定到'xxx'这样的错误，因为它不是一个已知的本机属性，最有可能的原因是忘记在指令元数据数组中指定一个组件或指令(或包含该组件或指令的常量)。这里的情况就是这样。

因为你没有指定RouterLink或常量ROUTER_DIRECTIVES -它包含以下内容:

export const ROUTER_DIRECTIVES = [RouterOutlet, RouterLink, RouterLinkWithHref, 
  RouterLinkActive];

-在指令数组中，然后当Angular解析

<a [routerLink]="['RoutingTest']">Routing Test</a>

它不知道RouterLink指令(它使用属性选择器RouterLink)。因为Angular知道a元素是什么，所以它假设[routerLink]="…"是a元素的属性绑定。但它随后发现routerLink不是元素的原生属性，因此抛出关于未知属性的异常。

我从来都不喜欢语法的模糊性。例如,考虑

<something [whatIsThis]="..." ...>

仅通过查看HTML，我们无法判断atisthis是什么

某物的固有属性指令的属性选择器某物的输入属性

我们必须知道哪些指令:[…]]在组件的/指令的元数据中指定，以便在心理上解释HTML。当我们忘记在指令数组中放入一些东西时，我觉得这种模糊性会使调试变得有点困难。

2016-07-09 17:44:25

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

推荐文章

最新文章

标签