无法在本机元素上绑定 angular2 指令 - routerLink
Can't bind angular2 directive on native element - routerLink
是的,还有其他一些类似的问题,但由于我的应用程序的结构,我的情况有所不同...
基本上我收到了这个错误:
异常:模板解析错误:
无法绑定到 'routerLink',因为它不是已知的原生 属性("or="#item of menuItems;#i=index">][routerLink]="['Rooms']">{{item.label}}
我决定将路由器声明基本上放在所有涉及的文件中,以确保不缺少声明的指令。
嗯,我的应用结构是这样的:
app.component : 它在我的路由器插座所在的 html 中调用主模板。
navbar.component - 是我的路由器 link 所在的位置并导致错误
room.component - 如果成功应该调用的组件。
app.component - 代码:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
import {RouterLink} from 'angular2/router';
import {NavBarComponent} from './components/navBar/navbar.component';
import {RoomsComponent} from './components/rooms/rooms.component';
@Component({
selector: 'my-app',
directives : [NavBarComponent,RoomsComponent,ROUTER_DIRECTIVES],
templateUrl : 'app/templates/master.html'
})
@RouteConfig([
{path:'/rooms', name: 'Rooms', component: RoomsComponent, useAsDefault: true}
])
export class AppComponent { }
navbar.component - 代码:
import {Component} from 'angular2/core';
import {RouterLink} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
@Component({
selector: 'nav-bar',
template : `<ul>
<li *ngFor="#item of menuItems; #i=index"><a
[ngClass]="{active: activeIndex ==i}" (click)= "navigateTo(i)"
[routerLink]="['Rooms']"> {{item.label}}</a></li>
<div class="exit"><i class="material-icons md-48">exit_to_app</i> </div>
</ul>
`,
})
export class NavBarComponent {
menuItems = [
{
label : 'Rooms',
pointsTo : 'Rooms'
},
{
label : 'Bookings',
pointsTo : 'Bookings'
},
{
label : 'Favourites',
pointsTo : 'Favourites'
}
];
activeIndex = 0;
constructor() {
this.navigateTo = function(ndx){
this.activeIndex = ndx;
}
}
}
rooms.component - 代码
import {Component} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
import {RouterLink} from 'angular2/router';
@Component({
selector : 'rooms',
template : `
<h1>I'm the room !</h1>`,
})
export class RoomsComponent {
}
master.html - 代码:
<div class="appContainer">
<div class="appTop">
<div class="logo">
<logo></logo>
</div>
<div class="navBar">
<nav-bar></nav-bar>
</div>
<div class="mobileMenu">
mobile menu
</div>
</div>
<div class="appContent">
<div class="searchArea">
Search
</div>
<div class="subjectArea">
<router-outlet></router-outlet>
</div>
</div>
</div>
main.ts - 代码:
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
export class NavBarComponent {
缺失 ROUTER_DIRECTIVES
@Component({
selector: 'nav-bar',
directives : [ROUTER_DIRECTIVES],
template : `<ul>
<li *ngFor="#item of menuItems; #i=index"><a
[ngClass]="{active: activeIndex ==i}" (click)= "navigateTo(i)"
[routerLink]="['Rooms']"> {{item.label}}</a></li>
<div class="exit"><i class="material-icons md-48">exit_to_app</i> </div>
</ul>
`,
})
export class NavBarComponent {
就像你在 AppComponent
是的,还有其他一些类似的问题,但由于我的应用程序的结构,我的情况有所不同...
基本上我收到了这个错误:
异常:模板解析错误: 无法绑定到 'routerLink',因为它不是已知的原生 属性("or="#item of menuItems;#i=index">][routerLink]="['Rooms']">{{item.label}}
我决定将路由器声明基本上放在所有涉及的文件中,以确保不缺少声明的指令。
嗯,我的应用结构是这样的:
app.component : 它在我的路由器插座所在的 html 中调用主模板。 navbar.component - 是我的路由器 link 所在的位置并导致错误
room.component - 如果成功应该调用的组件。
app.component - 代码:
import {Component} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
import {RouterLink} from 'angular2/router';
import {NavBarComponent} from './components/navBar/navbar.component';
import {RoomsComponent} from './components/rooms/rooms.component';
@Component({
selector: 'my-app',
directives : [NavBarComponent,RoomsComponent,ROUTER_DIRECTIVES],
templateUrl : 'app/templates/master.html'
})
@RouteConfig([
{path:'/rooms', name: 'Rooms', component: RoomsComponent, useAsDefault: true}
])
export class AppComponent { }
navbar.component - 代码:
import {Component} from 'angular2/core';
import {RouterLink} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
@Component({
selector: 'nav-bar',
template : `<ul>
<li *ngFor="#item of menuItems; #i=index"><a
[ngClass]="{active: activeIndex ==i}" (click)= "navigateTo(i)"
[routerLink]="['Rooms']"> {{item.label}}</a></li>
<div class="exit"><i class="material-icons md-48">exit_to_app</i> </div>
</ul>
`,
})
export class NavBarComponent {
menuItems = [
{
label : 'Rooms',
pointsTo : 'Rooms'
},
{
label : 'Bookings',
pointsTo : 'Bookings'
},
{
label : 'Favourites',
pointsTo : 'Favourites'
}
];
activeIndex = 0;
constructor() {
this.navigateTo = function(ndx){
this.activeIndex = ndx;
}
}
}
rooms.component - 代码
import {Component} from 'angular2/core';
import {Router, RouteParams} from 'angular2/router';
import {RouterOutlet} from 'angular2/router';
import {RouterLink} from 'angular2/router';
@Component({
selector : 'rooms',
template : `
<h1>I'm the room !</h1>`,
})
export class RoomsComponent {
}
master.html - 代码:
<div class="appContainer">
<div class="appTop">
<div class="logo">
<logo></logo>
</div>
<div class="navBar">
<nav-bar></nav-bar>
</div>
<div class="mobileMenu">
mobile menu
</div>
</div>
<div class="appContent">
<div class="searchArea">
Search
</div>
<div class="subjectArea">
<router-outlet></router-outlet>
</div>
</div>
</div>
main.ts - 代码:
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [ROUTER_PROVIDERS]);
export class NavBarComponent {
缺失 ROUTER_DIRECTIVES
@Component({
selector: 'nav-bar',
directives : [ROUTER_DIRECTIVES],
template : `<ul>
<li *ngFor="#item of menuItems; #i=index"><a
[ngClass]="{active: activeIndex ==i}" (click)= "navigateTo(i)"
[routerLink]="['Rooms']"> {{item.label}}</a></li>
<div class="exit"><i class="material-icons md-48">exit_to_app</i> </div>
</ul>
`,
})
export class NavBarComponent {
就像你在 AppComponent