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。

1. 本次用到queryParams属性用于页面传值；

2. 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 树并从节点提取信息（激活当前路由中的信息）。

ActivatedRoute参考：Angular - ActivatedRoute

获取传值完成绑定

src\app\yellow.component.html

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