使用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>

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

我非常感谢@raykrow的回答，当一个人只有在测试文件中有这个问题!这就是我遇到它的地方。

因为有另一种方法来做备份是很有帮助的，所以我想提一下这个技巧，它也同样有效(而不是导入RouterTestingModule):

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

(通常情况下，我们会在<a>元素上使用routerLink，但对其他组件相应地调整选择器。)

我想要提到这个替代解决方案的第二个原因是，尽管它在许多规范文件中都很有用，但在一个案例中我遇到了一个问题:

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

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

我尝试了这个方法:

在Html中:

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

TS文件:

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

在你们的模块中

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

你必须导出模块RouteModule

例子:

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

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

在我的例子中，我在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 {
        
     }

对于>= 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},
])