angular - 为什么 Angular 2 Route 仅获取单个 templateUrl

Question

我有一个 Angular 2 应用程序，我正在学习。我有两个带有 templateUrl 的组件，但路由不起作用，只有 url 正确，但内容是相同的。请看我下面的代码。

app.module.ts

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

import { AppComponent }  from './app.component';
import { AppItemUnit }  from './inventory/itemUnit.component';

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

const appRoutes: Routes = [
  { path: 'Dashboard', component: AppComponent },
  { path: 'ItemUnit', component: AppItemUnit }
];

@NgModule ({
  imports: [ BrowserModule,HttpModule,RouterModule.forRoot(appRoutes)],
  declarations: [ AppComponent,AppItemUnit],
  bootstrap: [ AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: 'views/dashboard.html',
})
export class AppComponent  { name = 'Angular'; }

itemUnit.component.ts

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

@Component ({
   selector: 'my-app',
   templateUrl: 'views/itemUnit.html',
})
export class AppItemUnit  {
}

index.html

<router-outlet></router-outlet>
<ul class="dropdown-menu">
    <li><a href="Dashboard">Dashboard</a></li>
    <li><a href="ItemUnit">Item Unit</a></li>
</ul>

Answer 1

您必须通过路由器定向到特定路线，如下所示:

<li><a routerLink="Dashboard">Dashboard</a></li>