Question

是的，还有其他一些类似的问题，但由于我的应用程序的结构，我的情况有所不同......

基本上我收到了这个错误：

EXCEPTION：模板解析错误：无法绑定到'routerLink'，因为它不是已知的本机属性（“或=”＃item of menuItems; #i = index“＆gt;] [routerLink] =”['Rooms']“＆gt; {{ item.label}}

我决定将路由器声明放在基本上所有涉及的文件中，以确保不缺少声明的缺失指令。

好吧，我的app结构是这样的：

app.component：它在我的路由器插座所在的html中调用主模板。 navbar.component - 是我的路由器链接所在的位置并导致错误

room.component - 如果成功的话应该调用的组件。

app.component - code：

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]);

Answer 1

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

中拥有它们一样

无法在native元素上绑定angular2指令 - routerLink

1 个答案: