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

最新推荐文章于 2025-01-15 15:57:30 发布

勘察加熊人

最新推荐文章于 2025-01-15 15:57:30 发布

阅读量2.6k

点赞数 1

分类专栏： typescript 文章标签： angular.js typescript javascript

本文链接：https://blog.youkuaiyun.com/cf8833/article/details/123448263

版权

typescript 专栏收录该内容

166 篇文章

订阅专栏

本文档详细介绍了在Angular应用中如何利用router模块进行页面跳转和值传递。步骤包括添加路由模块、创建组件，以及在不同组件间进行操作。通过示例代码和布局文件，展示了首页、我的页面和详情页面的实现过程，最终成功运行应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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