Angular 路由get传参 & 内部跳转

本节知识点：

静态路由 get 传参；
动态路由 get 传参；
js 实现内部路由跳转；

为了演示路由跳转和传值，继续上次的【路由基本配置】继续分解，创建的组件分别是【header】，【home】，【set】和【more】,目录结构和依赖关系如下：

1.基础准备：

【app-routing.module.ts】路由配置：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

/* 引入组件 */
import { HomeComponent } from './components/home/home.component';
import { MoreComponent } from './components/more/more.component';
import { SetComponent } from './components/set/set.component';


/* 配置路由 */
const routes: Routes = [
  {path:'', pathMatch:'full', redirectTo:'home'},
  {path:'home',component: HomeComponent},
  {path:'set',component: SetComponent},
  {path:'more/:aid',component: MoreComponent} /* 动态路由配置 */
];

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

【app.component.html】挂载头部组件和路由：

<app-header></app-header>
<router-outlet></router-outlet>

【styles.scss】全局样式中编写点简单的样式：

/* You can add global styles to this file, and also import other style files */
body{
    margin: 0px;
    padding: 0px;
    background-color:#eff3f5;
}

.figure{
    background-color: orange;
    margin: 80px 0px 0px 0px;
    padding: 0px;
    height: auto;
}

2. 在头部组件中准备菜单导航栏：

1.【header.component.html】导航栏布局：

<header class="header">
    <!-- <nav>
      <ul>
        <li>
          <a title="home" target="_self" routerLink="/home" routerLinkActive="active">首页</a>
        </li>
        <li>
          <a title="set" target="_self" routerLink="/set" routerLinkActive="active">设置</a>
        </li>
        <li>
          <a title="more" target="_self" routerLink="/more" routerLinkActive="active">更多</a>
        </li>
      </ul>
    </nav> -->
  
    <nav>
      <ul>
        <li>
          <a href="#" title="home" target="_self" [routerLink]="['/home']" routerLinkActive="active">首页</a>
        </li>
        <li>
          <a href="#" title="set" target="_self" [routerLink]="['/set']" routerLinkActive="active">设置</a>
        </li>
        <li>
          <a href="#" title="more" target="_self" [routerLink]="['/more',123]" routerLinkActive="active">更多</a>
        </li>
      </ul>
    </nav>
  </header>

2.【header.component.scss】编写样式：

.header{
    /* 设置宽度高度背景颜色 */
    height: auto; /*高度改为自动高度*/
    width:100%;
    position: fixed; /*固定在顶部*/
    top: 0;/*离顶部的距离为0*/
    margin: 0px;
    background-color: rgba(117, 30, 95, 0.69);

    & li{
        list-style:none;
        float: left;
        text-align: center;
        float:left; /* 使li内容横向浮动，即横向排列  */
        margin-right:50px;  /* 两个li之间的距离*/
    }
    
    & li a{
        /* 设置链接内容显示的格式*/
        display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
        color:white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none; /* 去除下划线 */
    }
    
    & li a:hover{
        /* 鼠标选中时背景变为黑色 */
        background-color: #111;
    }
}

3.在首页组件中准备演示代码：

1.【home.component.ts】ts中代码：

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

/* 1.引入Router，NavigationExtras */
import { Router, NavigationExtras } from '@angular/router'; 

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

  public techStack:string[] = [];
  constructor(private outer:Router) { }

  ngOnInit(): void {
    this.techStack = ['.NET Core','C#','Angular','TypeScript','DataBase'];
  }

  /* 跳转到more组件 */
  goMore(): void{
    //2.js路由跳转,适合普通路由和动态路由, 只需引入 Router
    this.outer.navigate(['/more','404']); 
  }

  /* 跳转到set组件 */
  goSet(): void{
    //3.get跳转路由并传值，需引入 Router,NavigationExtras 
    let navExtr:NavigationExtras = {
      queryParams:{'id':'666','title':'xxx'},
      fragment:'anchor'
    };
    this.outer.navigate(['/set'],navExtr);
  }

}

2.【home.component.html】页面准备代码：

<figure class="figure">
    <h3>home works!</h3>
    <ul>
        <li>1.静态路由get传参</li>
        <li *ngFor="let item of techStack; let i=index;">
            <!-- 1.路由跳转，queryParams里面参数是object -->
            <a [routerLink]="['/set']" routerLinkActive="active" [queryParams]="{'aid':i,'val':item}">
                {
   
   {item}} -------------- {
   
   {i}}
            </a>
        </li>
    </ul>
    <hr/>
    <ul>
        <li>2.动态路由get传参</li>
        <li *ngFor="let item2 of techStack; let key=index;">
            <a [routerLink]="['/more/',key]" routerLinkActive="active">
                {
   
   {item2}} -------------- {
   
   {key}}
            </a>
        </li>
    </ul>
    <hr/>
    <ul>
        <li>3.js跳转路由</li>
        <li>
            <button (click)="goMore()">js跳转路由(普通)=》more</button>
        </li>
        <li>
            <button (click)="goSet()">js跳转路由(且传值)=>set</button>
        </li>
    </ul>
</figure>

运行如下所示：【ng serve --open】

4.目标组件【set，more】接收传过来的参数值：

注：为了区分演示路由传值，set组件接收静态路由传值，more组件接受动态路由传值；

1.1【set.component.ts】实现代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; /* 1.1引入ActivatedRoute */

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

  /* DI注册ActivatedRoute */
  constructor(private route:ActivatedRoute) { }

  ngOnInit(): void {
    //1.2接收静态路由get传值
    console.log(this.route.queryParams);
    //route.queryParams 对象也是基于【Observable】
    this.route.queryParams.subscribe((data:any)=>{
      console.log(data);
    });
  }

}

1.2【set.component.html】实现代码：

<figure class="figure">
    <h3>set works!</h3>
    <ul>
        <li>我是【set】组件</li>
    </ul>
</figure>

2.1【more.component.ts】实现代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'; /* 2.1引入ActivatedRoute */

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

  /* DI注册ActivatedRoute */
  constructor(private route:ActivatedRoute) { }

  ngOnInit(): void {
    //2.2接收动态路由get传值
    console.log(this.route.params);
    //route.params 对象也是基于【Observable】
    this.route.params.subscribe((data: any) => {
      console.log(data);
    });
  }

}

2.2【more.component.html】实现代码：

<figure class="figure">
    <h3>more works!</h3>
    <ul>
        <li>我是【more】组件</li>
    </ul>
</figure>

以上就完成本节知识点演示，实现【静态路由】和【动态路由】的get传参以及内部 js 路由跳转。

5.总结

静态路由 get 传参；

//1.【app-routing.module.ts】文件

//1.1 引入组件：
import { SetComponent } from './components/set/set.component';

//1.2【Routes】路由配置：
/* 配置路由 */
{path:'set',component: SetComponent} //静态路由配置

/*-------------------------------------------------------------------*/

//2.目标组件【set】接收参数传值
//2.1引入ActivatedRoute
import { ActivatedRoute } from '@angular/router'; /* 引入ActivatedRoute */

//2.2构造函数DI注册ActivatedRoute
constructor(private route:ActivatedRoute) { }

//2.3接收静态路由get传值
ngOnInit(): void {
    //接收静态路由get传值
    console.log(this.route.queryParams);
    //route.queryParams 对象也是基于【Observable】
    this.route.queryParams.subscribe((data:any)=>{
      console.log(data);
    });
}

动态路由 get 传参；

//1.【app-routing.module.ts】文件

//1.1 引入组件：
import { MoreComponent } from './components/more/more.component';

//1.2【Routes】路由配置：
/* 配置路由 */
{path:'more/:aid',component: MoreComponent} //配置动态路由

/*-------------------------------------------------------------------*/

//2.目标组件【more】接收参数传值
//2.1引入ActivatedRoute
import { ActivatedRoute } from '@angular/router'; /* 引入ActivatedRoute */

//2.2构造函数DI注册ActivatedRoute
constructor(private route:ActivatedRoute) { }

//2.3接收动态路由get传值
ngOnInit(): void {
    //接收动态路由get传值
    console.log(this.route.params);
    //route.params 对象也是基于【Observable】
    this.route.params.subscribe((data: any) => {
      console.log(data);
    });
}

js 实现内部路由跳转；

//1.【app-routing.module.ts】文件，同上需要配置基本路由规则；

/*---------------------------------------------------------*/

//2.由于演示js路由跳转是在home组件演示，所以在home组件实现以下步骤;
//2.1 引入所需路由模块【Router，NavigationExtras】
import { Router, NavigationExtras } from '@angular/router'; 

//2.2 事件方法/函数实现跳转：
/* 跳转到more组件 */
goMore(): void{
    //2.js路由跳转,适合普通路由和动态路由, 只需引入 Router
    this.outer.navigate(['/more','404']); 
}

/* 跳转到set组件 */
goSet(): void{
    //3.get跳转路由并传值，需引入 Router,NavigationExtras 
    let navExtr:NavigationExtras = {
      queryParams:{'id':'666','title':'xxx'},
      fragment:'anchor'
    };
    this.outer.navigate(['/set'],navExtr);
}