Angular跳转传值

一、get传值

//传值
<ul *ngFor="let item of list;let ss=index;">
    <li><a routerLink="/newsDetail" [queryParams]="{aid:item.id}">{{item.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 item of list;let ss=index;">
    <li><a [routerLink]="['/newsDetail',item.id]">{{item.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跳转

//引入
import { Router } from '@angular/router';

//初始化
export class HomeComponent implements OnInit {
     constructor(private router: Router) {}
}

//跳转
<button (click)="goHome()">goHome</button>

import { Router } from '@angular/router';
    //js跳转
  goHome(){
    //传值
    //this.router.navigate(['/home','1'])
    //不传值
    this.router.navigate(['/home'])
  }

四、js get传值

<button (click)="goGetHeader()">goGetHeader</button>

import { Router,NavigationExtras } from '@angular/router';
constructor(public router:Router) { }
  goGetHeader(){
    let queryParams:NavigationExtras={
      queryParams:{'id':12}
    }
    this.router.navigate(['/header'],queryParams)
  }