[JavaScript知识库]Angular使用router路由，做页面跳转，传值

Angular使用router路由，做页面跳转，传值

step1: 添加路由模块，创建三个组件模块，首页 我的 详情页

ng generate module app-routing --flat --module=app
ng generate component user
ng generate component dashboard
ng generate component userDetail

step2: 路由 D:\vue\untitled2900\src\app\app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {UserDetailComponent} from "./user-detail/user-detail.component";
import {UserComponent} from "./user/user.component";
import {DashboardComponent} from "./dashboard/dashboard.component";

const routes: Routes = [
  {path:'',redirectTo:'/dashboard',pathMatch:'full'},
  {path: 'users', component: UserComponent},
  {path: 'userDetail', component: UserDetailComponent},
  {path: 'dashboard', component: DashboardComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

step3: 主页布局 D:\vue\untitled2900\src\app\app.component.html

<h1>主页启动页</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/users">Users</a>
</nav>
<router-outlet></router-outlet>

step4: 我的模块

4.1 我的 功能 D:\vue\untitled2900\src\app\user\user.component.ts

import { Component, OnInit } from '@angular/core';
import {NavigationExtras,Router} from "@angular/router";

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  name:string ='李军鹏';

  constructor(private router:Router) { }

  ngOnInit(): void {
  }

  getClick(){
    let navigationExtras:NavigationExtras = {
      queryParams:{'name':this.name}
    }
    this.router.navigate(['userDetail'],navigationExtras).then((r: any) => console.log(r))
  }


}

4.2 我的 布局 D:\vue\untitled2900\src\app\user\user.component.html

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

step5: 首页模块

5.1 首页 功能 D:\vue\untitled2900\src\app\dashboard\dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import {NavigationExtras,Router} from "@angular/router";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  name:string='黄小明';
  constructor(private router:Router) { }


  ngOnInit(): void {
  }


  getClick(){
    let navigationExtras:NavigationExtras = {
      queryParams:{'name':this.name}
    }
    this.router.navigate(['userDetail'],navigationExtras).then((r: any) => console.log(r))
  }

}

5.2 首页 布局 D:\vue\untitled2900\src\app\dashboard\dashboard.component.html

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

step6: 详情模块

6.1 详情 功能 D:\vue\untitled2900\src\app\user-detail\user-detail.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {

  name:string | undefined;

  constructor(private route: ActivatedRoute) {
    this.route.queryParams.subscribe((r: any) => {
      this.name = r.valueOf().name;
    })
  }


  ngOnInit(): void {
  }

}

6.2 详情 布局 D:\vue\untitled2900\src\app\user-detail\user-detail.component.html

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

run，运行成功，

end