Angular父组件接收@Output数据的两种方式

Angular父组件接收子组件数据方法解析

最新推荐文章于 2020-12-27 02:13:29 发布

原创最新推荐文章于 2020-12-27 02:13:29 发布 · 562 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

angular 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Angular中父组件如何接收到子组件通过@Output传递的数据，包括两种不同的实现方式。第一种方式简单直接，适用于基本的数据传递；第二种方式则允许更复杂的交互，能调用子组件的其他方法。

1、子组件的代码

// child.component.ts

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.styl']
})

export class ChildComponent implements OnInit {

  public outputData = 'outputTest';

  @Output()
  public outputEmitter: EventEmitter<any> = new EventEmitter();

  constructor() { }

  ngOnInit() {
    this.outputEmitter.emit(this.outputData);
  }

}

2、父组件的代码

<1>、第一种接收方式，简单直接，但不能调用子组件中的其他方法

// parent.component.ts

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.styl']
})

export class ParentComponent implements OnInit {

  public reviceData: string;

  constructor() { }

  ngOnInit() { }

  public outputActive(event) {
    this.reviceData = event;
  }

}

// parent.component.html

<div class="parent">
    接收到的数据是：{{reviceData}}
    <app-child (outputEmitter)="outputActive($event)"></app-child>
</div>

<2>、第二种接收方式，略为复杂，但可以调用子组件中的其他方法

// parent.component.ts

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.styl']
})

export class ParentComponent implements OnInit, OnDestroy {

  public reviceData: string;

  @ViewChild('childComponent', { static: true })
  public childComponent: ChildComponent;

  private reviceSubscription: any;

  constructor() { }

  ngOnInit() {
    this.reviceSubscription = this.childComponent.outputEmitter.subscribe((data: string) => {
      this.reviceData = data;
    });
  }

  ngOnDestroy() {
    this.reviceSubscription.unsubscribe();
  }

}

// parent.component.html

<div class="parent">
    接收到的数据是：{{reviceData}}
    <app-child #childComponent></app-child>
</div>