Question

我有2个组件，我想要component1.ts中component2.ts的变量值。我正在尝试使用事件发射器，如下所示

component1.ts

import { Component,EventEmitter,Output } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


//@IonicPage()
@Component({
  selector: 'page-profskills',
  templateUrl: 'profskills.html',
})
export class ProfskillsPage {
  @Output('from_profskills')
  public from_profskills: EventEmitter<string>;


  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.from_profskills.emit("Ps,Corel");
  }
...//

我希望from_profskills内component2.ts的值为test_from_profskills

请指导。

Answer 1

您可以使用可以声明变量的提供程序用作转换程序。

this.GlobalProvider.Var = value  //in component 1

Answer 2

如果你的两个组合没有任何关系，我建议尝试使用共享服务而不是EventEmitter。 https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 3

您应该通过以下服务使用角度事件，如下所示：

import { Subject } from 'rxjs/Subject';
export class TestService {
  private taskBoardUpdatedSource = new Subject < any[] > ();
  taskBoardUpdated$ = this.dataUpdatedSource.asObservable();
  fireEvent(data){
      this.taskBoardUpdatedSource.next(data);
  }
}

源组件将使用服务和调用方法＆＃34; fireEvent＆＃34;。

this.testService.fireEvent(data);

然后目标组件将消耗事件：

testService.taskBoardUpdated$.subscribe(
  data => {
    //Logic
  });

Answer 4

正如你所提到的，组件没有父子关系。

然后，您可以通过两种方式实现相同的方法：使用共享服务，其他方式使用 Redux ngrx 。

何时使用 -

如果你有一个非常大的应用程序，有很多组件和你   donot想要陷入Code的意大利面，然后去Redux吧   将所有数据保存在一个位置并通知组件   关于改变

如果它是一个中等大小的应用程序，那么去共享服务和   编写redux应用程序会产生一些额外的代码。

您可以在此处找到相关链接。 Shared Services有一个专门针对事件发射器的问题。

和

Ngrx

Answer 5

对于代码示例，您可以看到以下示例

全球提供商：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class GlobalProvider {
  public var : any;
}

任何其他组件：

import { GlobalProvider } from './../../providers/GlobalProvider';
@Component({
  selector: 'settings',
  templateUrl: 'settings.html'
})
export class SettingsComponent {
 constructor(  public globalProv : GlobalProvider ){
this.globalProv.var = "anything to share";
}
}

如何使用事件发射器

5 个答案: