![](/img/trans.png)
[英]Angular2 Exception: Can't bind to 'ngStyle' since it isn't a known native property
[英]Angular2 Exception: Can't bind to 'routerLink' since it isn't a known native property
显然 Angular2 的测试版比新的要新,所以没有太多信息,但我正在尝试做一些我认为相当基本的路由。
使用https://angular.io网站上的快速入门代码和其他片段进行黑客攻击,产生了以下文件结构:
angular-testapp/
app/
app.component.ts
boot.ts
routing-test.component.ts
index.html
文件填充如下:
索引.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 { }
路由-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)];
主文件
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-components 规范兼容。
全局注册
要使ROUTER_DIRECTIVES
全局可用,请将此提供bootstrap(...)
添加到bootstrap(...)
:
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
那么就不再需要将ROUTER_DIRECTIVES
添加到每个组件中。
对于在尝试运行测试时发现这一点的人,因为通过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/
使用 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
也可以使用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},
])
通常,每当您收到诸如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
数组时,我觉得这种歧义会使调试变得有点困难。
你的模块中有
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']);
}
就我而言,我已经在 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 {
}
如果在单元测试时遇到这个错误,请写这个。
import { RouterTestingModule } from '@angular/router/testing';
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [RouterTestingModule],
declarations: [AppComponent],
});
}));
我真的很感谢@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 的解决方案。
如果您使用共享模块,只需将 RouterModule 添加到声明您的组件的模块中,不要忘记添加<router-outlet></router-outlet>
从这里引用RouterLink 不起作用
我的解决方案很简单。 我使用 [href] 而不是 [routerLink]。 我已经尝试了 [routerLink] 的所有解决方案。 在我的情况下,它们都不起作用。
这是我的解决方案:
<a [href]="getPlanUrl()" target="_blank">My Plan Name</a>
然后在 TS 文件中写入getPlanUrl
函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.