Angular(12) - 添加导航 - 官方教程英雄指南之添加应用内导航 （详细解说）

添加应用内导航Navigation，官方实际效果图，最终的图和官方还是有区别的

1 添加导航模块

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。

2 修改路由模块文件

src/app/app-routing.module.ts 

• 2.1 导入路由模块 RouterModule, Routes
• 2.2 添加静态路由配置， 使用const常量 { path: 'heroes', component: HeroesComponent }
• 2.3 AppRoutingModule 导出 RouterModule，以便它在整个应用程序中生效。
• 2.4 将英雄组件导入，并且配置到路由中 HeroesComponent

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroesComponent } from './heroes/heroes.component';

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

3 添加路由出口 RouterOutlet , 我们将根组件下原来的HeroComponent替换成路由出口

• 3.1 AppComponent 的模板不再需要 ，因为只有当用户导航到这里时，才需要显示 HeroesComponent。
• 3.2 会告诉路由器要在哪里显示路由的视图。

src/app/app.component.html 

<h1>{{title}}</h1>
<router-outlet></router-outlet>
<app-messages></app-messages>

4 添加路由链接

src/app/app.component.html 

<h1>{{title}}</h1>
<nav>
  <a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>

5 运行, 浏览器应该刷新，并显示着应用的标题，但是没有显示英雄列表

ng serve