将变量值传递给ionic2中的另一个组件答案

【问题标题】：Pass variable value to another component in ionic2将变量值传递给ionic2中的另一个组件
【发布时间】：2017-06-19 01:03:36
【问题描述】：

我正在尝试根据存储在另一个组件中的变量的值来显示离子组件，它们是按钮。

该变量名为 isPickupRequested，一个存储在我的 home.ts

中的布尔值

我想在变量等于 true 时显示请求按钮，并在为 false 时隐藏它。

Home.ts

. . .
export class HomePage {

  public isPickupRequested: boolean;

  constructor(public navCtrl: NavController, public platform: Platform, 
   private geolocation: Geolocation, public events: Events)  {
    platform.ready().then(() => {

      this.loadMap();
      this.isPickupRequested = false;
}
. . .

request-button.html

<button [hidden]="!isPickupRequested" ion-button (tap)="ConfirmPickup()">Set pickup location</button>

request-button 组件如何访问 isPickupRequested 变量？

【问题讨论】：

标签： ionic-framework

【解决方案1】：

要将组件的值传递给父组件，您需要使用events。

所以从子页面做这样的事情：

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


@Component({ 
  ...
})
export class ChildPage {
  @Output() pickupConfirmed = new EventEmitter();

  ...

  notifyPickupConfirmed() {
    this.pickupConfirmed.emit(pickUpId);
  }
}

然后在父页面中，您可以像处理其他任何内容一样在模板中捕获事件：

<request-button (pickupConfirmed)="onPickupConfirmed($event)">

【讨论】：

谢谢。所以在你的例子中 home 是孩子，而 request-button 是父母？
鉴于您描述代码的方式，对于您的父组件和子组件是什么，我有点困惑，因此我故意避免在我的回答中显示任何此类关系（我写它与你的代码无关）:)。只要您了解在子组件上发出事件并在父组件上处理事件的基本原理，您就可以开始了。干杯！
我无法让它工作。 '找不到名称输出'。我这个是 ionic2 的吗？
是的。我忘了从@angular/core导入它
实现起来有点麻烦。 export class HomePage { @Output() pickupConfirmed = new EventEmitter(); public isPickupRequested: boolean; 导致重复标识符“isPickupRequested”。