Angular 2 Final Release路由問題

Question

我在Angular 2 Final Release路由中遇到了一些問題。當我在一個子組件添加[routerLink]，這個錯誤occures：

Can't bind to 'routerLink' since it isn't a known property of 'button' 

這裏是我的樹：

app 
| 
|___ app.routes.ts 
|___ app.module.ts 
| 
|___ user 
|_______ user.routes.ts 
|_______ user.module.ts 
|_______ user.component.ts 
| 
|_______ login 
|____________ login.module.ts 
|____________ login.component.html 
|____________ login.component.ts 

而現在的文件內容：

app.routes。 TS

import { Routes } from '@angular/router'; 

import { UserRoutes } from './user/user.component'; 

export const routes: Routes = [ 
    ...UserRoutes 
]; 

app.module。 TS

import { APP_BASE_HREF } from '@angular/common'; 

import { NgModule }    from '@angular/core'; 
import { BrowserModule }  from '@angular/platform-browser'; 
import { RouterModule }   from '@angular/router'; 
import { HttpModule }   from '@angular/http'; 

import { AppComponent }   from './app.component'; 
import { routes }    from './app.routes'; 

// Modules 
import { UserModule }   from './user/user.module'; 


@NgModule({ 
    imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), UserModule], 
    declarations: [AppComponent], 
    providers: [ 
    { 
     provide: APP_BASE_HREF, 
     useValue: '<%= APP_BASE %>' 
    }, 

    ], 
    bootstrap: [AppComponent] 

}) 

export class AppModule { } 

user.routes.ts

import { Route }    from '@angular/router'; 

import { UserComponent }  from './user.component'; 
import { LoginComponent }  from './login/login.component'; 



export const UserRoutes: Route[] = [ 
    { 
     path: '', 
     component: UserComponent, 
     children: [ 
      { 
       path: 'login', 
       component: LoginComponent 
      } 
     ] 
    } 
]; 

user.module.ts

import { NgModule }      from '@angular/core'; 
import { CommonModule }     from '@angular/common'; 
import { RouterModule }     from '@angular/router'; 

import { UserComponent }    from './user.component'; 

import { LoginModule }     from './login/login.module'; 



@NgModule({ 
    imports: [CommonModule, RouterModule, LoginModule], 
    declarations: [UserComponent], 
    exports: [UserComponent] 
}) 

export class UserModule { } 

user.component.ts

import { Component } from '@angular/core'; 

/** 
* This class represents the lazy loaded UserComponent. 
*/ 
@Component({ 
    selector: 'user', 
    template: '<router-outlet></router-outlet>', 
}) 
export class UserComponent { } 

個

login.module.ts

import { NgModule }    from '@angular/core'; 
import { CommonModule }   from '@angular/common'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { LoginComponent }  from './login.component'; 


@NgModule({ 
    imports: [CommonModule, ReactiveFormsModule], 
    declarations: [LoginComponent], 
    exports: [LoginComponent] 
}) 

export class LoginModule { } 

login.component.html

<button [routerLink]="['/']">Back home</button> 

在login.component.html，如果我刪除的按鈕，一切運行良好。 此外，如果我在user.component.ts添加按鈕，它的工作原理：

import { Component } from '@angular/core'; 

/** 
* This class represents the lazy loaded UserComponent. 
*/ 
@Component({ 
    selector: 'user', 
    template: '<button [routerLink]="[\'/\']">Back home</button>', 
}) 
export class UserComponent { } 

Answer 1

指令，組件和管道不被父模塊繼承到子模塊。您還需要將任何必需的模塊導入到孩子中。在LoginModule中，你從未導入過RouterModule