Angular使用router路由，做页面跳转，传值
    1: 添加路由模块，创建三个组件模块，首页 我的 详情页

    1. ng generate module app-routing --flat --module=app//创建路由模块
    2. ng generate component user
    3. ng generate component dashboard
    4. ng generate component userDetail

    2: 路由 src\app\app-routing.module.ts

    1. import {NgModule} from '@angular/core';
    2. import {RouterModule, Routes} from "@angular/router";
    3. import {UserDetailComponent} from "./user-detail/user-detail.component";
    4. import {UserComponent} from "./user/user.component";
    5. import {DashboardComponent} from "./dashboard/dashboard.component";
    7. const routes: Routes = [
    8.   {path:'',redirectTo:'/dashboard',pathMatch:'full'},
    9.   {path: 'users', component: UserComponent},
    10.   {path: 'userDetail', component: UserDetailComponent},
    11.   {path: 'dashboard', component: DashboardComponent}];
    13. @NgModule({
    14.   imports: [RouterModule.forRoot(routes)],
    15.   exports: [RouterModule]
    16. })
    18. export class AppRoutingModule {
    19. }

    3：主页布局 src\app\app.component.html

    1. <h1>主页启动页</h1>
    2. <nav>
    3.   <a routerLink="/dashboard">Dashboard</a>
    4.   <a routerLink="/users">Users</a>
    5. </nav>
    6. <router-outlet></router-outlet>

    4: 我的模块
    4.1 我的 功能 src\app\user\user.component.ts

    1. import { Component, OnInit } from '@angular/core';
    2. import {NavigationExtras,Router} from "@angular/router";
    4. @Component({
    5.   selector: 'app-user',
    6.   templateUrl: './user.component.html',
    7.   styleUrls: ['./user.component.css']
    8. })
    9. export class UserComponent implements OnInit {
    11.   name:string ='userName';
    13.   constructor(private router:Router) { }
    15.   ngOnInit(): void {
    16.   }
    18.   getClick(){
    19.     let navigationExtras:NavigationExtras = {
    20.       queryParams:{'name':this.name}
    21.     }
    22.     this.router.navigate(['userDetail'],navigationExtras).then((r: any) => console.log(r))
    23.   }
    24. }

    4.2 我的 布局 src\app\user\user.component.html

    1. <h1>我的fragment</h1>
    2. <h1 style="background: brown" (click)="getClick()">请点击我，跳转到用户信息{{name}}</h1>

    5: 首页模块
    5.1 首页 功能 src\app\dashboard\dashboard.component.ts

    1. import { Component, OnInit } from '@angular/core';
    2. import {NavigationExtras,Router} from "@angular/router";
    4. @Component({
    5.   selector: 'app-dashboard',
    6.   templateUrl: './dashboard.component.html',
    7.   styleUrls: ['./dashboard.component.css']
    8. })
    9. export class DashboardComponent implements OnInit {
    11.   name:string='dashboardName';
    12.   constructor(private router:Router) { }
    15.   ngOnInit(): void {
    16.   }
    19.   getClick(){
    20.     let navigationExtras:NavigationExtras = {
    21.       queryParams:{'name':this.name}
    22.     }
    23.     this.router.navigate(['userDetail'],navigationExtras).then((r: any) => console.log(r))
    24.   }
    26. }

    5.2 首页 布局 src\app\dashboard\dashboard.component.html

    1. <h1>首页fragment</h1>
    2. <h1 style="background: green" (click)="getClick()">请点击我，跳转到数据列表{{name}}</h1>

    6: 详情模块
    6.1 详情 功能 src\app\user-detail\user-detail.component.ts

    1. import { Component, OnInit } from '@angular/core';
    2. import {ActivatedRoute} from "@angular/router";
    4. @Component({
    5.   selector: 'app-user-detail',
    6.   templateUrl: './user-detail.component.html',
    7.   styleUrls: ['./user-detail.component.css']
    8. })
    9. export class UserDetailComponent implements OnInit {
    11.   name:string | undefined;
    13.   constructor(private route: ActivatedRoute) {
    14.     this.route.queryParams.subscribe((r: any) => {
    15.       this.name = r.valueOf().name;
    16.     })
    17.   }
    20.   ngOnInit(): void {
    21.   }
    23. }

    6.2 详情 布局 src\app\user-detail\user-detail.component.html

    1. <h1>详情页fragment</h1>
    2. <h1 style="background: orange">详情页数据{{name}}</h1>