从home.ts发出变量，需要在popup.ts中捕获它

Question

我从home.ts发出一个值，我想在popup.ts中发现它的价值。粘贴在home.ts代码和popup.ts代码之下。我需要在popup.ts做什么来接收它？

home.ts代码：

import { Component,Output, EventEmitter } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { PopoverController } from 'ionic-angular';
import { PopoverPage } from './popup';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @Output() chatEvent = new EventEmitter();    // 1

  public bring_on_popup = "I am from home";


  constructor(public popoverCtrl: PopoverController,public navCtrl: NavController, public navParams: NavParams) {

    this.chatEvent.emit(this.bring_on_popup);
...

popup.ts代码

import { Component , OnInit, Input, EventEmitter} from '@angular/core';
import { ViewController } from 'ionic-angular';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';



@Component({
    template: `
      <ion-list>
        <ion-list-header>Ionic</ion-list-header>
        <button ion-item (click)="close()">Learn Ionic</button>
        <button ion-item (click)="close()">Documentation</button>
        <button ion-item (click)="close()">Showcase</button>
        <button ion-item (click)="close()">GitHub Repo</button>
      </ion-list>
    `
  })
  export class PopoverPage {
    constructor(public viewCtrl: ViewController) {}

    close() {
        //  console.log(this.bring_on_popup);
      this.viewCtrl.dismiss();
    }
  }

我相信我正在以正确的方式发射，我只需要在popup.ts中捕获bring_on_popup变量

Answer 1

角度中的组件以多种方式进行通信，其中之一是输入和输出，但要使用此方法，它需要是连接组件之间的子父关系。

例如：如果组件“A”需要告诉用户已登录的组件“B”。

“B”组件的模板（HTML文件）应包含以下内容：

  <A (loggedIn)="onLoggedIn($event)"></A>

而“B”组件的TypeScript文件应该包含onLoggedIn方法：

  private onLoggedIn(data:any){
        console.log(data);
  }

因此，在某些操作中，“A”组件将发出一个名为“loggedIn”的事件，如下所示：

@Output() loggedIn = new EventEmitter(); 
private onLoginFormSubmit(){
    this.loggedIn.emit({username:"blabla", password: "blabla"});
}