显然,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 { }
路由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后,router-link指令被破坏.但是,其中一个答案中的"工作示例"是基于pre-beta代码 - 这可能仍然有效,但我想知道为什么我创建的代码不起作用.
任何指针都会感激不尽!
Gün*_*uer 375
> = 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>以便与需要-自定义元素名称的Web组件规范兼容.
全球注册
要使ROUTER_DIRECTIVES全局可用,请将此提供程序添加到bootstrap(...):
provide(PLATFORM_DIRECTIVES, {useValue: [ROUTER_DIRECTIVES], multi: true})
然后不再需要添加ROUTER_DIRECTIVES到每个组件.
ray*_*pps 108
对于那些在尝试运行测试时发现这种情况的人,因为通过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/
Adr*_*isa 24
使用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>
这是一个小差异,但足以触发错误.最丑陋的部分是,每次复制和粘贴时,这种小差异都会让我不再注意.凭借纯粹的机会,我看到了这个小小的差异并解决了它.
Sha*_*Roy 11
对于> = 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用作directivesie.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是
somethingsomething我们必须知道directives: [...]在组件的/指令的元数据中指定了哪些,以便在心理上解释HTML.当我们忘记在directives数组中添加某些内容时,我觉得这种模糊性会让调试变得更加困难.
你有你的模块
import {Routes, RouterModule} from '@angular/router';
你必须导出模块RouteModule
例:
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
能够访问导入此模块的所有人的功能.
小智 5
我已经尝试了上面提到的所有方法。但是没有一种方法适合我。最后我得到了上述问题的解决方案，它对我有用。
我试过这个方法：
在 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 {
}
| 归档时间： |
|
| 查看次数： |
184931 次 |
| 最近记录： |