Angular Routing uncaught错误

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. Angular读取导入模块导出的所有组件，指令和管道 - 例如，当您将BrowserModule导入AppModule时，CommonModule的所有组件和指令将被阅读，因为BrowserModule导出CommonModule

2. Angular读取当前模块中声明的所有组件，指令和管道。

该列表构成了Angular在扫描模板时操作的上下文。这意味着除非您在模块中声明了一个指令或从另一个模块中导入了它，否则当Angular在模块模板中遇到它时，它将无法识别它并会给您一个错误，例如：

  

无法绑定到'routerLink'，因为它不是'a'

的已知属性

因此，当您看到这一点时，您立即知道在此模块的上下文中，routerLink指令既未声明也未导入。

修复很简单：从RouterModule导出CommonModule，以便所有其他模块都可以使用路由指令（例如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

保留的