Question

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

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

您必须通过Router直接指向特定路线：

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

为什么Angular 2 Route只获取单个templateUrl

1 个答案: