Angular跳转传值(get,动态路由,js)

2021-01-24 14:15

阅读:435

标签:str   bsp   lin   const   ext   oge   tor   navig   ons   

一,get传值

 

ul *ngFor="let l of list;let ss=index;">
    li>a routerLink="/newsDetail" [queryParams]="{aid:l.id}">{{l.content}}a>li>

ul>

接收

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

constructor(public router:ActivatedRoute) { }

//get获取传值
 this.router.queryParams.subscribe((data)=>{
   console.log(data)
 })

 二,动态路由传值

配置

{
    path:‘newsDetail/:id‘,component:NewDetailComponent
  }

跳转

ul *ngFor="let l of list;let ss=index;">

  li>a [routerLink]="[‘/newsDetail‘,l.id]">{{l.content}}a>li>
ul>

接收


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

constructor(public router:ActivatedRoute) { }

//
动态路由 this.router.params.subscribe((data)=>{ console.log(data) this.id=data.id; })

 三、动态路由的js跳转

1, 引入

import { Router } from ‘@angular/router‘;

2.初始化

export class HomeComponent implements OnInit {
     constructor(private router: Router) {}
}

跳转

button (click)="goHome()">goHomebutton>
import { Router } from ‘@angular/router‘;

    //js跳转
  goHome(){
    //传值
    //this.router.navigate([‘/home‘,‘1‘])

    //不传值
    this.router.navigate([‘/home‘])
  }

 

四,js get传值

button (click)="goGetHeader()">goGetHeaderbutton>
import { Router,NavigationExtras } from ‘@angular/router‘;

constructor(public router:Router) { }

  goGetHeader(){
    let queryParams:NavigationExtras={
      queryParams:{‘id‘:12}
    }

    this.router.navigate([‘/header‘],queryParams)

  }

 

Angular跳转传值(get,动态路由,js)

标签:str   bsp   lin   const   ext   oge   tor   navig   ons   

原文地址:https://www.cnblogs.com/zhulei2/p/13252051.html


评论


亲,登录后才可以留言!