如何在 ionic 3 中使用 @output答案

【问题标题】：How to use @output in ionic 3如何在 ionic 3 中使用 @output
【发布时间】：2018-11-22 15:40:12
【问题描述】：

这是父页面

<div>
    <component></component>
<div>

这将重定向到我创建表单的这个组件现在我想获取我在父页面中填写表单的数据在子页面

<h5> Type of house </h5>
        <ion-item>
            <ion-label stacked> </ion-label>
            <ion-select [(ngModel)]="Type" placeholder="type of house">
                <ion-option value="self"> a </ion-option>
                <ion-option value="got" selected> b </ion-option>
            </ion-select>
        </ion-item>

有一个简单的表格

我知道如何将数据从父级传递给子级，但我不知道如何使用 @output 将数据从子级传递给父级

【问题讨论】：

angular.io/guide/component-interaction 检查输出部分。这很容易
我不能从中得到太多，这就是我在这里问的原因

标签： html angularjs typescript ionic-framework ionic3

【解决方案1】：

在 child.ts

import {Output, EventEmitter} from '@angular/core';
export class ChildComponent {
  ...
  @Output() typeChanged = new EventEmitter<string>();
  type = "got";

  emit() {
    this.typeChanged.emit(this.type);
  }
}

在parent.html

中

<div>
    <component (typeChanged)="onTypeEmitted($event)"></component>
<div>

在 parent.ts

export class ParentComponent {
  ...
  onTypeEmitted(type: string) {
    // do something with 'type'
  }
}

其实你可以从angular.io/guide/component-interaction#Parent listens for child event获取。

【讨论】：