首先要添加路由模块，通常定义为 AppRoutingModule，通过CLI指令生成：
ng generate module app-routing –flat –module=app
–flat
把这个文件放进了
src/app
中，而不是单独的目录中。
–module=app
告诉 CLI 把它注册到
AppModule
的
imports
数组中。
生成后的代码：
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’;
@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class AppRoutingModule { }
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
@NgModule({
exports: [ RouterModule ]
})
export class AppRoutingModule {}
接下来就是要把项目里的路由添加进来，其中有两个必要属性：
路由定义
会告诉路由器，当用户点击某个链接或者在浏览器地址栏中输入某个 URL 时，要显示哪个视图。
-
path
：一个用于匹配浏览器地址栏中 URL 的字符串。
-
component
：当导航到此路由时，路由器应该创建哪个组件。
RouterModule.forRoot()
你必须首先初始化路由器，并让它开始监听浏览器中的地址变化。
把
RouterModule
添加到
@
NgModule
.imports
数组中，并用
routes
来配置它。你只要调用
imports
数组中的
RouterModule
.forRoot()
函数就行了。
这个方法之所以叫
forRoot()
，是因为你要在应用的顶级配置这个路由器。
forRoot()
方法会提供路由所需的服务提供商和指令，还会基于浏览器的当前 URL 执行首次导航。
import { NgModule } from ‘@angular/core’;
// import { CommonModule } from ‘@angular/common’;
import { RouterModule, Routes } from ‘@angular/router’;
import { HeroesComponent } from ‘./heroes/
heroes.component
‘;
import { DashboardComponent } from ‘./dashboard/
dashboard.component
‘;
const routes: Routes = [
//
设置默认跳转路由， full表示与path为空的路由完全匹配
{ path: ”, redirectTo: ‘/dashboard’, pathMatch: ‘full’ },
{ path: ‘heroes’, component: HeroesComponent },
{ path: ‘dashboard’, component: DashboardComponent }
];
@NgModule({
imports: [
// CommonModule
RouterModule.forRoot(routes)
],
//declarations: [] //你通常不会在路由模块中声明组件，所以可以删除 @NgModule.declarations,并删除对 CommonModule 的引用。
exports: [ RouterModule ]
})
export class AppRoutingModule { }
添加路由出口 （
RouterOutlet
）
能在 AppComponent 中使用
RouterOutlet
，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了
RouterModule
。
RouterOutlet
，是因为 AppModule 导入了 AppRoutingModule，而 AppRoutingModule 中导出了
RouterModule
。
路由跳转及传参的几种形式：
1.通过路由路径传递
在html标签中用属性 routerLink=”/xxx” ,可以设置路由跳转
AppRoutingModule定义的路由数组中：
{ path: ‘xxx/:para’, component: ComponentName } //多个参数就添加多个/:para
组建中跳转路由的代码：
<a routerLink
=”/xxx/para”>
2.通过路由参数
AppRoutingModule定义的路由数组中：
{ path: ‘xxx’, component: ComponentName }
在component.ts里通过Router的navigate方法跳转
import { Router } from ‘@angular/router’;
….
constructor(
private router: Router) { }
toDetail(id,name){
this.router.navigate([‘xxx’], {
queryParams: {
id: id,
name: name
}
});
}
或者，在template上，通过添加参数属性
queryParams
：
queryParams
：
<a [routerLink]=”[‘/product’]” [queryParams]=”{id: 1,name: ‘name’}”>产品</a>
获得参数的几种形式：
import { ActivatedRoute } from ‘@angular/router’;
…
constructor(
private route: ActivatedRoute
) { }
ngOnInit() {
//1.路由快照
const id = this.route.snapshot.paramMap.get(‘para’);
// 2.路由订阅
this.route.params
.subscribe((params: Params) => {
this.id = params[‘para’];
})
// 3.多个参数的时候
this.route.queryParams
.subscribe(queryParams => {
this.id = queryParams.id;
this.name = queryParams.name;
});
}
路由返回：
import { Location } from ‘@angular/common’;
…
constructor(
private location: Location
) { }
goBack(): void {
this.location.back();
}
版权声明：本文为xnyssxy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。