如何在Ionic 3中使用@output

Question

这是父页面

<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将数据从父级传递给父级

Answer 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监听子事件来获取它。