Angular2异常：由于它不是已知的本机属性，因此无法绑定到“ routerLink”

277

显然，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>

引导程序

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后，router-link指令中断。但是，答案之一中的“有效示例”是基于beta版的代码-可能仍然可以使用，但是我想知道为什么我创建的代码不起作用。

任何指针将不胜感激！

angular 
— 莱斯特·伯纳姆
source
4
另一个问题有所不同：directives: [ROUTER_DIRECTIVES]。
— 埃里克·马丁内斯
1
即使使用ROUTER_DIRECTIVES，我也会遇到相同的错误。@Component({selector: "app"}) @View({templateUrl: "app.html", directives: [ROUTER_DIRECTIVES, RouterLink]})
— 菲尔
8
通过添加directives: [ROUTER_DIRECTIVES]和从[router-link]更改为[routerLink]，我不再遇到错误。
— 菲尔

Answers:

392

> = 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)];

主要

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到每个组件中。

— 贡特·佐赫鲍尔（GünterZöchbauer）
source
1
是的，您也可以在这样引导应用程序时分配多个指令：provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES, FORM_DIRECTIVES, ETC...], multi: true})
— Pardeep Jain
1
是的，但是默认情况下已经FORM_DIRECTIVES包含PLATFORM_DIRECTIVES了它。
— 君特Zöchbauer
2
太好了，谢谢。我还发现，当试图把它放在一起这样有用：stackoverflow.com/questions/34391790/...
— 杰夫
这里可能是一个愚蠢的问题，但是这里的RC.1，RC.2是什么？我正在使用角度2.1.2，它是哪个RC？
— 陈剑
1
@AlexanderMills为什么年长的Andwers会吓you你？旧的答案是久经考验的，因此非常值得信赖的，P
— 君特Zöchbauer
116

对于在尝试运行测试时发现此问题的人，因为通过npm test或ng test使用Karma或其他任何方式。您的.spec模块需要特殊的路由器测试导入才能构建。

import { RouterTestingModule } from '@angular/router/testing';

TestBed.configureTestingModule({
    imports: [RouterTestingModule],
    declarations: [AppComponent],
});

http://www.kirjai.com/ng2-component-testing-routerlink-routeroutlet/

— rayepps
source
2
这是一个很大的收获！我的项目在正常操作方面没有任何问题，它是spec我必须添加的文件。谢谢@raykrow！
— kbpontius
1
确认也可以在角度4中工作。谢谢你！
— JCisar '17
这必须是接受的答案，接受的答案是错误的，因为在导入时RouterModule，您需要调用forRoot以使该模块满意，然后您应该提供BASE_HREFand ...
— Milad
1
您是否知道Angular 5+是否有所不同？我Can't bind to 'active' since it isn't a known property of 'a'.在几个单元测试中都遇到了类似的错误，并且已经导入RouterTestingModule。
— Stuart Updegrave，
25

使用Visual Studio进行编码时的警告语（2013）

我已经浪费了4到5个小时来尝试调试此错误。我尝试通过字母找到在StackOverflow上找到的所有解决方案，但仍然出现此错误：Can't bind to 'routerlink' since it isn't a known native property

请注意，在复制/粘贴代码时，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>

差异很小，但足以触发错误。最丑陋的部分是，每次我复制粘贴时，这种细微的差别一直在避免我的注意力。偶然的机会，我看到了这个细微的差别并解决了。

— 阿德里安·莫伊萨（Adrian Moisa）
source
4
谢谢，您可能已经提到“ routerlink”与“ routerLink”之间的区别。Angular 2期望存在“ routerLink”，但找到“ routerlink”
— Narendran Solai Sridharan
谢谢，由于某种原因，一些教程使用了“ router-link”，中间用破折号。但是routerLink是正确的版本。
— windmaomao
webpack和html-minifier也会发生同样的情况，但仅限于生产环境。添加区分大小写：真正的HTML加载器选项看到：github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-an gular用于工作角5 +的WebPack 3.9配置
— 萨曼莎Adrichem
12

对于> = 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用作directivesie。directives: [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},
])
— 谢沙布·罗伊（Shaishab Roy）
source
我认为这不再适用（角度5），等等
— 亚历山大·米尔斯
10

通常，每当出现类似的错误时Can't bind to 'xxx' since it isn't a known native property，最可能的原因是忘记在directives元数据数组中指定组件或指令（或包含该组件或指令的常量）。这里就是这种情况。

由于您未指定RouterLink或常量ROUTER_DIRECTIVES- 包含以下内容：

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

–在directives数组中，然后当Angular解析时

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

它不知道RouterLink指令（使用属性选择器routerLink）。由于Angular确实知道a元素是什么，因此假定它[routerLink]="..."是元素的属性绑定a。但是它随后发现这routerLink不是a元素的本机属性，因此引发了有关未知属性的异常。

我从不真正喜欢语法的歧义。即考虑

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

只要看一眼的HTML，我们不能告诉我们，如果whatIsThis是

  • 的自然财产 something
  • 指令的属性选择器
  • 输入属性 something

我们必须知道directives: [...]在组件/指令的元数据中指定了哪些，才能从精神上解释HTML。当我们忘记将某些内容放入directives数组时，我感到这种歧义使调试变得有些困难。

— 马克·拉科克
source
7

你有你的模块

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

您必须导出模块RouteModule

例：

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

以便能够为所有导入此模块的人访问功能。

— alehn96
source
5

我已经尝试了上面提到的所有方法，但是没有一种方法对我有用。

我尝试了这种方法：

在HTML中：

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

在TS文件中：

aboutPageLoad() {
    this.router.navigate(['/about']);
}
— 苏尼尔·库马尔（Sunil Kumar KK）
source
4

在我的情况下，我已经在App模块中导入了RouterModule，但没有在功能模块中导入。在我的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 {

 }
— 编码EZ
source
3

如果在单元测试时出现此错误，请编写此代码。

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

当一个人仅在测试文件中有此问题时，我真的很感谢@raykrow的回答！那是我遇到的地方。

由于使用另一种方式做备份通常很有帮助，因此我想提一下这种技术也可以（代替import RouterTestingModule）起作用：

import { MockComponent } from 'ng2-mock-component';
. . .
TestBed.configureTestingModule({
  declarations: [
    MockComponent({
      selector: 'a',
      inputs: [ 'routerLink', 'routerLinkActiveOptions' ]
    }),
    . . .
  ]

（通常，将routerLink在一个<a>元素上使用，但为其他组件相应地调整选择器。）

我想提及此替代解决方案的第二个原因是，尽管它在许多规范文件中都非常有用，但在一种情况下，我遇到了问题：

Error: Template parse errors:
    More than one component matched on this element.
    Make sure that only one component's selector can match a given element.
    Conflicting components: ButtonComponent,Mock

我不太清楚这个模拟程序和我如何ButtonComponent使用相同的选择器，因此在寻找替代方法时，我想到了@raykrow的解决方案。

— 迈克尔·索伦斯
source
-4

我的解决方案很简单。我正在使用[href]而不是[routerLink]。我已经尝试了[routerLink]的所有解决方案。在我的情况下，它们都不起作用。

这是我的解决方案：

<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>

然后将该getPlanUrl功能写入TS文件。

— 陈庚
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.