ng组件间传值 （dx01 父子间传值）

组件结构：3传参数到1, 1传数据到2

 

一、3传参数到1

3.html:

  <button class="query-btn" nz-button nzType="default" (click)="clickHandle()">确定</button>

3.ts:

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

 @Output() clickEv = new EventEmitter<any>();

 // “确定”控件
  clickHandle() {
    this.clickEv.emit({
      cityId: this.cityId,
      // checkSele: this.checkStation,
      selectedCity: this.selectedCity,
      stationList: this.stationList,
      selectedStation: this.selectedStation,
      selectedTime: this.transformDate(this.selectedTime)
    });
  }

1.html:

  <!-- 下拉框选择 -->
  <app-selec-trans (clickEv)="searchHandle($event)"></app-selec-trans>

1.ts:

  // 接收下拉框组件参数
  searchHandle($event) {
    if (this.reqParams['date'] !== $event['selectedTime'] || this.reqParams['stationName'] !== $event['selectedStation']) {
      this.reqParams['stationName'] = $event['selectedStation'];
      this.reqParams['date'] = $event['selectedTime'];
      this.reqParams['parentCode'] = $event['cityId'];
      this.getStatisticsData();
    }
  }

二、1传参数到2 （父传子）

1.html:

  <!--第二列地图-->
      <li class="col-2">
        <app-transport-map [OoPro]="OoPro" [IPro]="IPro" [Outpro]="Outpro" [InPro]="InPro"></app-transport-map>
      </li>

1.ts:

  import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
  import { TransportMapComponent } from '../transportation/transport-map/transport-map.component';

//  // 在父组件执行子组件的方法
  @ViewChild(TransportMapComponent) private transportMapComponent: TransportMapComponent;


 // 监听抵达/出发选择   （子传父）
    this.transportMapComponent.typeSelectedEvent.subscribe(type => {                              
      this.reqParams['passengerType'] = type;
      this.getStatisticsData();
    });

2.html:

   <li class="btn-list js-switch">
      <button class="btn active " type="button" id='arrive' (click)="selectPassenger($event, true)"   /* 子传父*/
        appSwithActive>抵达乘客</button>
      <button class="btn" type="button" id='setout' (click)="selectPassenger($event, false)"
        appSwithActive>出发乘客</button>
    </li>

 

2.ts:

import { Component, OnInit, EventEmitter, ElementRef, Input, OnDestroy, OnChanges } from '@angular/core'; 

 // 从父组件传过来的数据 省外去向/省内去向/省外来源/省内来源（属性传值）
  @Input() OoPro: any;
  @Input() IPro: any;
  @Input() Outpro: any;
  @Input() InPro: any;

    typeSelectedEvent = new EventEmitter();

 

 // （OoPro省外去向/IPro省内去向/Outpro省外来源/InPro省内来源）
  ngOnChanges(changes) {
    for (let propName in changes) {
      if (propName === 'OoPro' && changes[propName]['currentValue']) {
        this.OoPro = changes[propName]['currentValue'];
        if (this.stationList) {
          (this.echartsType === propName) && this.getOoPro();
        }
      }
      if (propName === 'IPro' && changes[propName]['currentValue']) {
        this.IPro = changes[propName]['currentValue'];
        if (this.stationList) {
          (this.echartsType === propName) && this.getIPro();
        }
      }
      if (propName === 'Outpro' && changes[propName]['currentValue']) {
        this.Outpro = changes[propName]['currentValue'];
        if (this.stationList) {
          (this.echartsType === propName) && this.getOutpro();
        }
      }
      if (propName === 'InPro' && changes[propName]['currentValue']) {
        this.InPro = changes[propName]['currentValue'];
        if (this.stationList) {
          (this.echartsType === propName) && this.getInPro();
        }
      }
    }
  }

 /**  

   * 点击抵达/出发乘客按钮

   * @param $event ：当前元素 

   * @param isCome ：是否抵达乘客

   *

   */

    selectPassenger($event, isCome) {

    if ($event['target'].classList.contains('active')) {  

    this.typeSelectedEvent.emit(isCome ? 1 : 2);      //（子传父）

   }

 }