角度2の最終リリースルーティングの問題

Question

角度2の最終リリースのルーティングに問題があります。私は子コンポーネントで[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

01 login.component.htmlで

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> 

私は、ボタンを削除すると、すべてがうまくいきます。私は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