如何在 ionic 3 中使用 @output

Posted 2023-03-05

【中文标题】如何在 ionic 3 中使用 @output

【英文标题】：How to use @output in ionic 3

【发布时间】：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 检查输出部分。这很容易

我不能从中得到太多，这就是我在这里问的原因

【参考方案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获取。