引入并配置路由
src\app\app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { RouterModule, Routes } from '@angular/router'; .... @NgModule({ declarations: [ AppComponent, ProductListComponent, ProductAddComponent ], imports: [ ... RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/add', component: ProductAddComponent }, ]) ], |
使用路由
在src\app\app.component.html，添加
|
1 2 |
<a [routerLink]="['/products/add']" title="add">添加</a> <router-outlet></router-outlet> |
<router-outlet>类似一个页面的占位符。
首先展示首页ProductList。当点击【添加】后，里面的内容就变为添加页面ProductAdd。