![82dca569340ff1dd2ab120981025a0cd.png](https://i-blog.csdnimg.cn/blog_migrate/a9bfa3f9c4c05fd8f795a52184e370e4.jpeg)
在Angular中,最好在一个顶级模块中加载和配置路由,它专注于路由功能,然后由根模块AppModule导入它,最后还有初始化并监听浏览器的地址变化。
生成路由
按照惯例,这个模块类的名字叫做AppRoutingModule
,并且位于scr/app
下的app-routing.module.ts
文件中。
ng generate module app-routing --flat --module=app
--flat 把这个文件放进了 src/app 中,而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中。
// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
导入相关路由模块
通常不会在路由模块中声明组件,可以删除@NgModule.declarations
并删除对CommonModule
的引用。
你将会使用RouterModule
中的 Routes
类来配置路由,所以还需要导入@angular/router
添加一个 @NgModule.exports
数组,其中放上 RouterModule
。 导出 RouterModule
让路由器的相关指令可以在 AppModule
中的组件中使用。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@NgModule({
exports: [ RouterModule ]
})
export class AppRoutingModule {}
添加路由定义
路由定义会告诉路由,当用户点击某个链接或者在浏览器中输入某个URL时,要显示哪个视图
典型的Angular路由有两个属性:
- path:一个用于匹配浏览器地址中 URL 的字符串
- component:当导航到此路由时,路由器应该创建哪个组件
应用场景:当URL为localhost:4200/heroes时,导航到HeroesComponent
// 首先要导入 HeroesComponent ,以便能在 Route中引用
import { HeroesComponent } from './heroes/heroes.component';
// 路由定义一个路由数组,其中某个路由指向这个数组。
const routes: Routes = [
{
path: 'heroes',
component: HeroesComponent
}
];
初始化路由
RouterModule.forRoot()
把RouterModule添加到@NgModule.imports数组中,并用routes来配置
@NgModule(){
imports: [RouterModule.forRoot(routes, {initialNavigation: 'enabled'})],
exports: [RouterModule]
}
添加路由出口 RouterOutlet
打开AppComponent模板
// 在显示区域添加路由出口,router-outlet会告诉路由要在哪里显示路由到的视图
...
<router-outlet></router-outlet>
...
能在AppComponent中使用RouterOutlet,是因为AppModule导入了AppRoutingModule,而AppRoutingModule导出了 RouterModule
添加路由链接 routerLink
不应该只能让用户把URL粘贴到地址栏中来访问,还应该可以通过点击导航来访问视图
<h1>{{title}}</h1>
<nav>
<a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
<app-messages></app-messages>
routerLink 属性的值为 "/heroes",路由器会用它来匹配出指向 HeroesComponent 的路由。 routerLink 是 RouterLink 指令的选择器,它会把用户的点击转换为路由器的导航操作。 它是 RouterModule 中公开的另一个指令。
添加默认路由
当应用启动时,浏览器的地址栏指向了网站的根路径。 它没有匹配到任何现存路由,因此路由器也不会导航到任何地方。 <router-outlet> 下方是空白的。
要让应用自动导航到这个仪表盘,请把下列路由添加到 AppRoutingModule.Routes 数组中。
const routes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'heroes',
component: HeroesComponent
}
];
添加详情视图
要导航到id位11的英雄详情,类似于:~/detail/11
首先导入英雄详情组件:
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
然后把一个参数化路由添加到 AppRoutingModule.routes 数组中,它要匹配指向英雄详情视图的路径。
{ path: 'detail/:id', component: HeroDetailComponent },
// src/app/dashboard/dashboard.component.html
<a *ngFor="let hero of heroes" class="col-1-4"
routerLink="/detail/{{hero.id}}">
<div class="module hero">
<h4>{{hero.name}}</h4>
</div>
</a>
回退
把一个后退按钮添加到组件模板的底部,并且把它绑定到组件的 goBack() 方法。
<button (click)="goBack()">go back</button>
goBack(): void {
this.location.back();
}