angular传输数据的几种方式 - 图11. service传参-(补：发布订阅 + Observable可观察者对象)

    ng g service event

    1. @Injectable({
    2.   providedIn:'root'
    3. })
    4. export class EventService{
    5.    // 构建Subject的实例，用来完成事件的发布和订阅
    6.   private subject = new Subject < any > ();
    7.   constructor() {}
    8.   publish(value: any, err: any) {
    9.     if (value !== undefined) {
    10.       // 将新的事件放入next队列中
    11.       this.subject.next(value);
    12.     }
    13.     if (err !== undefined) {
    14.       // 将错误放入error队列
    15.       this.subject.error(err);
    16.     }
    17.     // 表示当前事件结束
    18.     this.subject.complete();
    19.   }
    21.   subcribe(handler: {
    22.    next: (value) => void,
    23.    error: (err) => void,
    24.    complete: () => void
    25.   }) {
    26.     this.subject.asObservable().subcribe(handler);
    27.   }
    28. }

    在app.module.ts注册

    1. @NgModule({
    2.   declarations:[],
    3.   import:[],
    4.   providers:[EventService],
    5.   bootstrap:[AppComponent]
    6. })
    7. export class AppModule{}

    使用
    组件A

    1. export class AComponent implements OnInit{
    2.   constructor(private event:EventService){}
    3.   ngOnInit() {}
    4.   someThingChanged(data) {
    5.     // 发布事件
    6.     this.event.publish({
    7.     // 可以定义一个事件类型，实现多个不同类型事件的发布
    8.     type: 'event_type_you_want_define',
    9.     // 可以携带任何数据，并通过事件发布出去
    10.     data: data,
    11.     ohter: 'ohter things you want to pass out'
    12.    }, err);
    13.   } 
    14. }

    组件B

    1. export BComponent implements OnInit {
    2.  constructor(
    3.   private event: EventService
    4.  ) { }
    5.  ngOnInit() {
    6.    // 在初始化方法中，可以完成对事件的订阅工作
    7.   this.event.subject({
    8.    next: value => {
    9.     // 可以通过约定事件类型，在这里进行检查，从而完成不同的逻辑
    10.     // do something with value
    11.    },
    12.    error: err => {
    13.     // handle err
    14.    },
    15.    complete: () => {
    16.     // handle complete
    17.    }
    18.   })
    19.  }
    20. }
    1. 父子组件传参（import outport）

    父级->子级
    父组件

    1. <app-search [options]="StatusStr"></app-search>

    子组件

    1. @import() options:Array<string>

    子级->父级

    • 使用Output

    子组件：

    1. import { Component, Output, EventEmitter } from '@angular/core';
    2. @Output() search = new EventEmitter<string>();
    4. onSearch(keycode, val) {
    5.     if (keycode == 13) {
    6.       this.search.emit(val);
    7.     }    
    8.   }
    1. 父组件
    1. <app-search (search)="searchUser($event)"></app-search>

    • 使@ViewChild

      父组件

      1. <app-search #footerChild></app-search>
      1. import {Component,OnInit,ViewChild} from '@angular/core'
      2. @ViewChild('footerChild',{static:false}) footer
    1. 根据url传参（routLink）
      • 传参：
        1. {path:’stock’,component:StocksComponent}
        3. const routerParams: NavigationExtras = {
    1.        queryParams: {

    _id: id}
    }
    this.router.navigate([/CI-Dashboard/cw-detail], routerParams);
    接收参数：this.stockId=this.routerInfo.snapshot.queryParams[“id”]

    1.   -  传参： {path:'stocks/:id',component:StocksComponent}
    3.    接收参数：this.stockId=this.routerInfo.snapshot.params["id"]
    5.   -  传参：{path:'stocks',component:StocksComponent,data:[{ispro:true}]}
    7.    接收参数：this.stockId = this.routerInfo.snapshot.data[0]["ispro"];