Angular routing get parameter & internal jump

Knowledge points in this section:

Static routing get pass parameters;
Dynamic routing get parameter transfer;
js realizes internal routing jump;

In order to demonstrate routing jump and value transfer, continue with the previous [ Routing Basic Configuration ] and continue to decompose. The created components are [header], [home], [set] and [more]. The directory structure and dependencies are as follows:

1. Basic preparation:

[App-routing.module.ts] Routing configuration:

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] Mount header components and routing:

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

[Styles.scss] Write some simple styles in the global style:

/* 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. Prepare the menu navigation bar in the head component:

1. [header.component.html] navigation bar layout:

<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] writing style:

.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. Prepare the demo code in the homepage component:

1. [home.component.ts] Code in 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] page preparation code:

<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>

The operation is as follows: [ng serve --open]

4. The target component [set, more] receives the passed parameter value:

Note: In order to distinguish between the demonstration route and the value, the set component receives the static route and the more component accepts the dynamic route;

1.1【set.component.ts】implementation code:

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] Implementation code:

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

2.1 [more.component.ts] Implementation code:

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] Implementation code:

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

The above is to complete the demonstration of the knowledge points in this section, and realize the get parameters of [static routing] and [dynamic routing] and the internal js routing jump.

5. Summary

Static routing get pass parameters;

//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);
    });
}

Dynamic routing get parameter transfer;

//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 realizes internal routing jump;

//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);
}