navigate实现页面跳转及传参

定义“路由词典”，注册Router和Routes。

src\app\app.module.ts

import { RouterModule } from '@angular/router'

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BlueComponent } from './blue/blue.component';
import { YellowComponent } from './yellow/yellow.component';
import { RouterModule } from '@angular/router';
import { WhiteComponent } from './white/white.component'//声明路由词典——路由地址和路由组件的对应集合
let routes = [{path:'blue',component:BlueComponent},{path:'yellow',component:YellowComponent},{path:'',redireactTo:'/white',pathMatch:'full',component:WhiteComponent},{path: '**', component: BlueComponent },
]@NgModule({declarations: [AppComponent,BlueComponent,YellowComponent,WhiteComponent],imports: [BrowserModule,AppRoutingModule,RouterModule,RouterModule.forRoot(routes)],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

创建路由组件挂载点——“路由出口”

src\app\app.component.html

<div class="bigBox"><div class="content"><div class="left"><button routerLink="/blue">去蓝色页面</button><button (click)="jump()">去黄色页面</button></div><div class="right"><router-outlet></router-outlet></div></div></div>

两个button都有实现路由跳转的功能，一个使用routerLink指令将你定义的路由连接到模板文件中，这里不做过多的赘述，另一个就是用脚本方法实现跳转。

通过脚本方法设置 URL 的查询参数

src\app\app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router'@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'angular01';jump(){this.router.navigate(['yellow'],{ queryParams:{name:'小明'} });console.log("切换了我");};constructor(private router: Router){};}

this.router.navigate(['yellow'],{ queryParams:{name:'小明'} });

navigate(commands, extras )基于所提供的命令数组和起点路由进行导航。如果没有指定起点路由，则从根路由开始进行绝对导航。

commands：一个 URL 段的数组，用于构造目标 URL 树。
extras：一个选项对象（NavigationExtras），用于确定应如何构造或解释 URL。可选值。默认值为 {skipLocationChange: false }
NavigationExtras:修改 Router 导航策略的选项.。为 Router 导航功能提供包含一些属性的对象，以控制应如何构造或解释目标 URL。

本次用到queryParams属性用于页面传值；
NavigationExtras属性详情参考链接：Angular - NavigationExtras

注意：不要忘了声明依赖Router

import { Router } from '@angular/router';

constructor(private router: Router){};

src\app\yellow.component.ts

import { Component, OnInit } from '@angular/core';
import {  ActivatedRoute } from '@angular/router';@Component({selector: 'app-yellow',templateUrl: './yellow.component.html',styleUrls: ['./yellow.component.css']
})
export class YellowComponent implements OnInit {constructor(private route:ActivatedRoute) { }uname:any="";ngOnInit(): void {//queryParams是一个 Observable，表示所有路由共享的查询参数this.route.queryParams.subscribe((params) => {console.log(params);console.log("切换成功");this.uname =params['name'];});}}

import { ActivatedRoute } from '@angular/router';

constructor(private route:ActivatedRoute) { }申明依赖ActivatedRoute

ActivatedRoute：允许访问与某出口中加载的组件关联路由信息。用于遍历 RouterState 树并从节点提取信息（激活当前路由中的信息）。

queryParams: Observable<Params>

声明在构造函数中

一个 Observable，表示所有路由共享的查询参数（?）。

ActivatedRoute参考：Angular - ActivatedRoute

获取传值完成绑定

src\app\yellow.component.html

<div class="yellowBox"><p>黄色页面</p><h4>我获取了参数:{{uname}}</h4>
</div>