Angular2 예외:'routerLink'는 알려진 네이티브 속성이 아니므로 바인딩할 수 없습니다.
분명히 Angular2의 베타는 새것보다 새것이기 때문에 많은 정보가 없지만, 저는 제가 생각하는 꽤 기본적인 라우팅을 하려고 노력하고 있습니다.
https://angular.io 웹 사이트의 빠른 시작 코드 및 기타 스니펫으로 해킹한 결과 다음과 같은 파일 구조가 발생했습니다.
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
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
여기서 모호하게 관련된 문제를 발견했습니다. 각 2.0.0-베타.0으로 업그레이드한 후 라우터 링크 지침이 깨졌습니다.그러나 답변 중 하나의 "작업 예제"는 베타 전 코드에 기반을 두고 있습니다. 이 코드는 여전히 작동할 수 있지만, 제가 만든 코드가 작동하지 않는 이유를 알고 싶습니다.
어떤 조언이든 감사히 받을 것입니다!
>=RC.5
수입하다, 수입하다, 수입하다,RouterModulehttps://angular.io/guide/router 도 참조하십시오.
@NgModule({
imports: [RouterModule],
...
})
>=RC.2
app.s.ts.
import { provideRouter, RouterConfig } from '@angular/router';
export const routes: RouterConfig = [
...
];
export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];
메인.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각 구성 요소에.
할 때, Via를 통해서 를 하려고 할 때 요.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용
또한 사용할 수 있습니다.RouterLinkdirectives예를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배열, 각도 구문 분석 시
<a [routerLink]="['RoutingTest']">Routing Test</a>
RouterLink 지시어(속성 선택기 사용)에 대해 알지 못합니다.routerLink 에 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .a요소는, 그것은 다음과 같이 가정합니다.[routerLink]="..."에 대한 속성 바인딩입니다.a원소의하지만 그 후에 그것은 발견합니다.routerLink는 의기 속아다니닙이성의 기본 .a요소, 즉 알 수 없는 속성에 대한 예외를 던집니다.
저는 문법의 모호함을 정말로 좋아한 적이 없습니다.예를 들어, 을 고려합니다.
<something [whatIsThis]="..." ...>
HTML인지 알요.whatIsThis이라
- 의
something - 지시의 속성 선택기
- 의 입력
something
우리는 어느 것인지 알아야 합니다.directives: [...]HTML을 정신적으로 해석하기 위해 구성 요소의/지시 메타데이터에 지정됩니다.가 그고우리무가언때가리를넣것는잊을어을렸버▁and때잊을▁into▁we▁the렸어버▁when▁forget.directives배열, 저는 이 모호함이 디버깅을 좀 어렵게 만든다고 생각합니다.
모듈에 포함되어 있습니다.
import {Routes, RouterModule} from '@angular/router';
Route Module 모듈을 내보내야 합니다.
예:
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
이 모듈을 가져오는 모든 사용자의 기능에 액세스할 수 있습니다.
위에서 언급한 모든 방법을 시도해 보았습니다.하지만 어떤 방법도 나에게 효과가 없습니다. 마침내 나는 위의 문제에 대한 해결책을 얻었고 그것은 나에게 효과가 있습니다.
저는 다음 방법을 시도했습니다.
HTML에서:
<li><a (click)= "aboutPageLoad()" routerLinkActive="active">About</a></li>
TS 파일:
aboutPageLoad() {
this.router.navigate(['/about']);
}
저의 경우 앱 모듈에서 라우터 모듈을 가져왔지만 기능 모듈에서는 가져오지 않았습니다.내 이벤트 모듈에서 라우터 모듈을 가져온 후 오류가 사라집니다.
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 {
}
유닛 테스트 중에 이 오류가 발생하면 다음과 같이 작성해주시기 바랍니다.
import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
}));
모듈을 되며,해야 합니다.<router-outlet></router-outlet>
여기서 참조한 RouterLink가 작동하지 않습니다.
테스트 파일에만 이 문제가 있을 때 @raykrow의 답변에 정말 감사드립니다!그곳이 제가 그것을 만난 곳입니다.
백업으로 다른 방법을 사용하는 것이 도움이 되는 경우가 많기 때문에 (가져오기 대신) 이 기술도 사용할 수 있습니다.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의 해결책을 찾을 수 있었습니다.
제 해결책은 간단합니다.[routerLink] 대신 [href]를 사용하고 있습니다.[routerLink]에 대한 모든 솔루션을 사용해 보았습니다.제 경우에는 아무 것도 안 통합니다.
제 솔루션은 다음과 같습니다.
<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>
그럼 다음을 쓰십시오.getPlanUrlTS 파일에 있는 함수입니다.
언급URL : https://stackoverflow.com/questions/34317044/angular2-exception-cant-bind-to-routerlink-since-it-isnt-a-known-native-pro
'programing' 카테고리의 다른 글
| mongob 설명 이해하기 (0) | 2023.06.30 |
|---|---|
| HTML - PHP의 텍스트 영역을 사용하여 MariaDB 테이블에 두 개의 값 삽입 (0) | 2023.06.30 |
| Mongodb에서 내장된 문서 속성을 업데이트하는 중 (0) | 2023.06.30 |
| Firebase 클라우드 기능 배포 오류 (0) | 2023.06.30 |
| Mac용 Excel VBA에서 HTTP GET를 발급하는 방법 (0) | 2023.06.30 |