Angular2 Исключение: не удается привязать к 'routerLink', поскольку это не известное свойство native

Ответ 1

>= RC.5

импортируйте RouterModule См. Также https://angular.io/docs/ts/latest/guide/router.html

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

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

<= РК-1

Ваш код отсутствует

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

Вы не можете использовать директивы типа routerLink или router-outlet, не сообщая их своему компоненту.

В то время как имена директив были изменены для чувствительности к регистру в Angular2, элементы по-прежнему используют - в имени типа <router-outlet> для совместимости с спецификацией веб-компонентов, для которой требуется - во имя пользовательские элементы.

зарегистрировать глобально

Чтобы сделать доступным ROUTER_DIRECTIVES глобально доступным, добавьте этого провайдера в bootstrap(...):

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

то больше не нужно добавлять ROUTER_DIRECTIVES к каждому компоненту.

Ответ 2

Для тех, кто находит это при попытке запуска тестов, потому что через 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/

Ответ 3

Осторожность при кодировании с помощью 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>

Это небольшая разница, но достаточно, чтобы вызвать ошибку. Самая уродливая часть заключается в том, что эта небольшая разница просто избегала моего внимания каждый раз, когда я копировал и вставлял. По чистой случайности я увидел эту небольшую разницу и решил ее.

Ответ 4

В общем случае всякий раз, когда вы получаете ошибку, например 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, поэтому он выдает исключение из неизвестного свойства.

Мне никогда не нравилась двусмысленность синтаксиса. I.e, рассмотрим

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

Просто взглянув на HTML, мы не можем определить, есть ли whatIsThis

• собственное свойство something
• селектор атрибутов директивы
• входное свойство something

Мы должны знать, какие directives: [...] указаны в метаданных компонента/директивы, чтобы мысленно интерпретировать HTML. И когда мы забываем что-то помещать в массив directives, я чувствую, что эта двусмысленность затрудняет отладку.

Ответ 5

Также можно использовать RouterLink как directives т.е. 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},
])

Ответ 6

У вас в вашем модуле

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

вам нужно экспортировать модуль RouteModule

Пример:

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

чтобы иметь возможность доступа к функциям для всех, кто импортирует этот модуль.

Ответ 7

Я пробовал все методы, о которых упоминалось выше. Но ни один метод не работает для меня. Наконец-то я получил решение для вышеупомянутой проблемы, и он работает для меня.

Я пробовал этот метод:

В Html:

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

В файле TS:

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

Ответ 8

В моем случае я импортировал 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 {

 }

Ответ 9

Мое решение простое. Я использую [href] вместо [routerLink]. Я пробовал все решения для [routerLink]. Ни один из них не работает в моем случае.

Вот мое решение:

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

Затем напишите функцию getPlanUrl в файле TS.