[angular] Angular2 예외 : 알려진 기본 속성이 아니기 때문에 ‘routerLink’에 바인딩 할 수 없습니다.

Program / 글쓴이

분명히 Angular2의 베타 버전은 새로운 것보다 최신 버전이므로 많은 정보가 없지만 상당히 기본적인 라우팅이라고 생각하는 것을하려고합니다.

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으로 업그레이드 한 후 라우터 링크 지시문이 손상되었습니다 . 그러나 답변 중 하나의 “작동 예”는 베타 버전 코드를 기반으로합니다.이 코드는 여전히 작동하지만 여전히 작성한 코드가 작동하지 않는 이유를 알고 싶습니다.

모든 포인터는 감사하게받을 것입니다!

답변

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

전 세계적으로 등록

ROUTER_DIRECTIVES전 세계적으로 사용 가능 하도록하려면 이 제공자를 bootstrap(...)다음에 추가하십시오 .

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

더 이상 ROUTER_DIRECTIVES각 구성 요소 에 추가 할 필요가 없습니다 .

답변

때문에를 통해 실행 시험을 시도 할 때이 찾을 사람들을 위해 npm test또는 ng test카르마 또는 어떤 다른 사람을 사용. .spec 모듈을 빌드하려면 특별한 라우터 테스트 가져 오기가 필요합니다.

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

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

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

답변

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>

작은 차이이지만 오류를 발생시키기에 충분합니다. 가장 추악한 부분은이 작은 차이가 복사하여 붙여 넣을 때마다주의를 기울이지 않는다는 것입니다. 우연히, 나는이 작은 차이를보고 해결했습니다.

답변

> = 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의 경우

또한 사용할 수 있습니다 RouterLinkA와 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},
])

답변

일반적으로와 같은 오류가 발생할 때마다 메타 데이터 배열 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 지시문 에 대해서는 알지 못합니다 . Angular는 요소가 무엇인지 알고 있기 때문에 요소 에 대한 속성 바인딩 이라고 가정합니다 . 그러나 그것은 그것이 요소 의 고유 속성이 아니라는 것을 발견 하므로 알 수없는 속성에 대한 예외를 던집니다.routerLinka[routerLink]="..."arouterLinka

나는 구문 의 모호성을 정말로 좋아하지 않았다 . 즉, 고려

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

경우 그냥 HTML을보고 우리는 말할 수 whatIsThis있다

  • 토착 재산 something
  • 지시문의 속성 선택기
  • 입력 속성 something

directives: [...]HTML을 정신적으로 해석하려면 컴포넌트 / 지시문의 메타 데이터에 어떤 것이 지정되어 있는지 알아야 합니다. 그리고 우리가 directives배열 에 무언가를 넣는 것을 잊었을 때 , 나는이 모호함 때문에 디버깅하기가 조금 더 어렵다고 생각합니다.

답변

당신은 당신의 모듈에

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

RouteModule 모듈을 내 보내야합니다

예:

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

이 모듈을 가져 오는 모든 사용자의 기능에 액세스 할 수 있습니다.

답변

위에서 언급 한 모든 방법을 시도했지만 어느 방법도 나를 위해 작동하지 않습니다. 마지막으로 위의 문제에 대한 해결책을 얻었으며 저에게 효과적입니다.

나는이 방법을 시도했다 :

HTML에서 :

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

TS 파일에서 :

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