角路由未被捕獲的錯誤

Question

我有以下幾點：

我收到一個錯誤說：

：

compiler.es5.js:1690 Uncaught Error: Template parse errors: 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("   <div class="navbar-header"> 
       <ul class="nav navbar-nav list-inline"> 
        <li class="home"><a [ERROR ->][routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [routerLink]="['/child']">Child</a>"): ng:///HomeModule/HomeComponent.html@7:25 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("inline"> 
        <li class="home"><a [routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [ERROR ->][routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [routerLink]="['/parent']">Parent"): ng:///HomeModule/HomeComponent.html@8:26 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("</li> 
        <li class="child"><a [routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [ERROR ->][routerLink]="['/parent']">Parent</a></li> 
       </ul> 
      </div> 

但是我在app.modules.ts宣佈它

@NgModule({ 
    declarations: [], 
    imports: [ 
     RouterModule.forRoot(appRoutes), 
     BrowserModule, 
     ChildModule, 
     ParentModule, 
     HomeModule 
    ], 
    providers: [], 
    bootstrap: [HomeComponent] 
}) 
export class AppModule { } 

在我的HomeComponent.html我有標題：

<header id="header"> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <ul class="nav navbar-nav list-inline"> 
        <li class="home"><a [routerLink]="['/home']">Login</a></li> 
        <li class="child"><a [routerLink]="['/child']">Child</a></li> 
        <li class="parent"><a [routerLink]="['/parent']">Parent</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 

但它是說它承認屬性。

我已上載的代碼的GitHub：[GitHub的] [2]

------------更新1 -------------- -

我更新CommonModule.ts

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

@NgModule({ 
    declarations: [], 
    // you don't need anything here since this module has no templates for Angular to parse! 
    imports: [RouterModule], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class CommonModule { } 

然後我導入到app.module.ts

@NgModule({ 
    declarations: [], 
    imports: [ 
     BrowserModule, 
     ChildModule, 
     ParentModule, 
     HomeModule, 
     CommonModule 
    ], 
    providers: [], 
    bootstrap: [HomeComponent] 
}) 
export class AppModule { } 

錯誤：

[2]：https://github.com/drewjocham/Routing.gitERROR在

ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (11,15): Cannot find name 'RouterModule'. 
ERROR in /Users/drew/Documents/OutputInput/Sample/node_modules/@angular/common/src/common_module.d.ts (13,9): Cannot find name 'RouterModule'. 

Answer 1

這是因爲HomeComponent是在Module這並不導入RouterModule聲明。 RouterLink是屬於它的指令。

要解決這個問題，您可以將RouterModule添加到HomeModule的進口數組中。

Answer 2

要理解這樣的錯誤，最好了解一下Angular流程模板的使用方法。基本版本如下：

1. 角讀取所有的組件，指令和原裝進口模塊出口管道 - 例如，當您導入BrowserModule到您的AppModule，所有組件和CommonModule指令都可以被讀取，因爲BrowserModule出口CommonModule

2. Angular讀取在當前模塊中聲明的所有組件，指令和管道。

該列表組成了Angular在掃描模板時的操作環境。這意味着，除非你宣佈你的模塊中的指令，或從另一個模塊導入後，在模塊模板兩端角時談到，它不會承認它，會給你一個錯誤，如：

燦「T綁定到‘routerLink’，因爲它不是一個已知的性質‘A’

所以，當你看到，你馬上知道，在這個模塊的背景下，routerLink指令既沒有宣佈，也沒有進口。

修復很簡單：從CommonModule導出RouterModule，以便路由指令（如routerLink）可供所有其他模塊使用。或者，您可以直接導入RouterModule。

@NgModule({ 
    declarations: [], 
    // you don't need anything here since this module has no templates for Angular to parse! 
    imports: [], 
    exports: [ 
     HttpModule, CommonModule, RouterModule 
    ] 
}) 
export class CommonModule { } 

要小心，不要使用RouterModule.forRoot()因爲這是留給AppModule