Angular笔记 路由传值

1.配置路由，创建组件 news newsdetails newsinfo三个模块。

2.在app.modle.ts中配置组件

import { GoodsComponent } from './components/goods/goods.component';
import { NewsdetailsComponent } from './components/newsdetails/newsdetails.component';
import { NewInfoComponent } from './components/newinfo/newinfo.component';

declarations: [
    AppComponent,
    GoodsComponent,
    NewsdetailsComponent,
    NewInfoComponent
  ],

3.在app-routing.ts中配置路由

import { NewsComponent } from './components/news/news.component';
import { NewsdetailsComponent } from './components/newsdetails/newsdetails.component';
import { NewInfoComponent } from './components/new-info/new-info.component';
const routes: Routes = [
  {path:"news",component:NewsComponent},
  {path:"newsdetails",component:NewsdetailsComponent},
  {path:"new-info/:aid",component:NewInfoComponent},
  {path:"**",redirectTo:"news"}
];

news中配置
ts

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

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



  public list:any[] = [];

  constructor() { }

  ngOnInit() {

    for (let index = 0; index < 10; index++) {
      
      this.list.push("这是第"+ index + "个值");
      
    }
  }

}

html

<p>news works!</p>
<ul>
    <li *ngFor="let item of list,let key = index">
        <a [routerLink]="[ '/newsdetails' ]" [queryParams] = "{aid:key}"> {{key}}--get--->{{item}}</a>
    </li>
</ul>

<hr>
<ul>
    <li *ngFor="let item of list,let key = index">
        <a [routerLink]="['/new-info/',key]">{{key}}--动态--->{{item}}</a>
    </li>
</ul>

get传值

要跳转的路由 [queryParams]：参数（固定写法）
<a [routerLink]="[ '/newsdetails' ]" [queryParams] = "{aid:key}"> {{key}}--get--->{{item}}</a>

动态传值

1.在配置路由时添加参数，{path:"new-info/:aid",component:NewInfoComponent},
2.要跳转的路由 ['path/', parameter] ，注意，path后面还有一个'/'，这个与get传值是有区别的。
3.<a [routerLink]="['/new-info/',key]">{{key}}--动态--->{{item}}</a>

接收值

1.导入 import { ActivatedRoute } from '@angular/router';
2.声明ActivatedRoute对象 constructor(public route:ActivatedRoute) { }
3.调用 接收值

get接收值

import { Component, OnInit, } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-newsdetails',
  templateUrl: './newsdetails.component.html',
  styleUrls: ['./newsdetails.component.scss']
})
export class NewsdetailsComponent implements OnInit {

  constructor(public route:ActivatedRoute) { }

  ngOnInit() {

    //queryParams get接收值的方法
    this.route.queryParams.subscribe((data)=>{
      console.log(data.aid);
    });
  }

}

动态接收值

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-new-info',
  templateUrl: './new-info.component.html',
  styleUrls: ['./new-info.component.scss']
})
export class NewInfoComponent implements OnInit {

  constructor(public route:ActivatedRoute) { }

  ngOnInit() {


    //params 动态接收值的方法
    this.route.params.subscribe((data)=>{
      console.log(data.aid);
    });

  }

}