angular路由传值 js跳转路由

本文主要给大家介绍angular中动态路由跳转和路由传值的方法，路由的配置本文就不再过多讲解，如果你还不清楚可以查阅上一篇文档。

动态路由配置

在path路由配置完后加上  /:+参数 就为动态路由  path:'content/:aid',

 // 配置路由

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

// 引入组件

import { ContentComponent } from './components/content/content.component';

const routes: Routes = [
  // 配置动态路由
  {
    path:'content/:aid',
    component:ContentComponent
  },

];

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

动态路由跳转传值的写法

[
// 路由
'/content/',
// 路由传的值
key]

<ul>
  <li *ngFor="let item of list;let key='index'">
    <a [routerLink]="['/content/',key]">动态路由跳转</a>
  </li>
</ul>

获取动态路由传值的方法

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

// 引入ActivatedRoute

import { ActivatedRoute } from '@angular/router';

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

  // 声明ActivatedRoute
  constructor(public route:ActivatedRoute) { }

  ngOnInit(): void {
    // 获取动态路由的值
    this.route.params.subscribe(res=>{
      console.log(res)
    })
  }
}

路由跳转get传值的方法

使用 [queryParams] 的属性进行传值，queryParams的值是一个对象，对象里面就是需要传的参数和对应的值。

<a routerLink="/content" *ngFor="let item of list;let key=index" [id]="item" [queryParams]="{id:item}">跳转新闻详情{{item}}<br/></a>

获取get的传值数据[queryParams]

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

// 引入ActivatedRoute

import { ActivatedRoute } from '@angular/router';

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

  // 声明ActivatedRoute
  constructor(public route:ActivatedRoute) { }

  ngOnInit(): void {
    //获取get传值
    this.route.queryParams.subscribe(res=>{
      console.log(res)
    })
  }
}

js跳转路由的方法

使用js实现路由与路由之间的跳转传值等。需要先引入 router 模块，如果使用的是get跳转传值需要引入 NavigationExtras 模块

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

// 引入route模块, get跳转需要引入 NavigationExtras模块
import {Router,NavigationExtras}from '@angular/router' 

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

  constructor(public Gorouter:Router) { }

  ngOnInit(): void {
  }
  goContent(){
      // 动态路由跳转
    this.Gorouter.navigate(['/productcontent/','12345'])    
  }
  goNews(){
      // get传值跳转
    let paramsData:NavigationExtras={
      queryParams:{
        id:'456456'
      }
    }
    this.Gorouter.navigate(['/news'],paramsData)
  }
}