角2广播事件通知其他组件

Question

所以我实际上是在失去理智。我对棱角2还不熟悉，我正在努力理解如何让兄弟姐妹的子组件相互连接。

我有n子组件，可以播放音频文件。

目标是如果有人启动，就停止玩组件。

例如:组件1被播放，我在组件2上播放start，组件1被停止，组件2被播放。

我尝试了共享服务，没有运气，也尝试与EventEmitter通信，从孩子到家长，但它不起作用。我想不出如何一次通知所有组件。

RegistrationComponent (儿童)

import {Component, Input, Output, EventEmitter} from '@angular/core';
import {Path} from "./data-model";
import {MediaPlugin} from '@ionic-native/media';
import {Platform} from 'ionic-angular';
import {SocialSharing} from '@ionic-native/social-sharing';
import {RegistrationService} from './registration.service';

@Component({
  selector: 'registration',
  template: `
      <div class="reg__name">{{ url.name }}</div>
      <button ion-button color="secondary" item-right clear large (click)="toggle(url.path);">
        <ion-icon [name]="playing ? 'md-square' : 'md-play'"></ion-icon>
      </button>`,
  providers: [
    MediaPlugin,
    SocialSharing,
    RegistrationService
  ]
})

export class RegistrationComponent {

  @Input() url: Path;

  @Input() someonePlaying: boolean = false;

  @Output() onPlayed = new EventEmitter<boolean>();

  playing: boolean = false;

  mediaContainer: any;

  path: string;

  constructor(private media: MediaPlugin,
              private platform: Platform,
              private socialSharing: SocialSharing,
              private service: RegistrationService) {

    this.path = "assets/audio";

    // service.playing.subscribe(val => this.onSomeonePlaying(val));

  }

  ngOnChanges() {
    console.log(this.someonePlaying);
  }

  toggle(filename) {
    this.playing
      ? this.stop()
      : this.play(filename)
  }

  play(fileName) {
    const mp3URL = this.getMediaURL(`${this.path}/${fileName}`);
    this.mediaContainer = this.media.create(mp3URL);

    this.mediaContainer.play();
    this.playing = true;
    this.onPlayed.emit(true);
  }

  stop() {
    this.mediaContainer.stop();
    this.playing = false;
    // this.service.stop();
  }

  share() {
    this.socialSharing.shareViaWhatsApp("Condividi su Whatsapp", "", "");
  }

  onSomeonePlaying(val: boolean) {
    console.log(val);
  }

  getMediaURL(s) {
    let isAndroid = this.platform.is("android");
    return isAndroid ? `/android_asset/www/${s}` : s;
  }


}

打印组件的home.html的部分

    <ion-item *ngFor="let url of currentUrls">
  <registration (onPlayed)="onPlayed($event)"
                [(someonePlaying)] = "globalPlaying"
                [url]="url"></registration>
</ion-item>

*home.ts**

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Registrations, Registration} from './data-model';

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

export class HomePage {

  path: string;

  urls: Array<any>;

  currentUrls: Array<{name: string, path: string}>;

  globalPlaying: boolean = false;

  constructor(public navCtrl: NavController) {

    this.path = "assets/audio";
    this.urls = Registrations;

    this.currentUrls = [];

    for (let i = 0; i < this.urls.length; i++) {
      this.currentUrls = this.currentUrls.concat(this.urls[i]["paths"]);
    }

  }

  onChange(key) {
    this.currentUrls = this.filter(key);
  }

  onPlayed(val){
    console.log("global playing", val);
    this.globalPlaying = true;
  }

  filter(key) {
    if (!key || key === "all")
      return this.findAll(this.urls);

    return this.findWhere(this.urls, key)["paths"];
  }

  findAll(collection) {
    let array = [];
    for (let i = 0; i < collection.length; i++) {
      array = array.concat(collection[i]["paths"]);
    }

    return array;
  }

  findWhere(collection, key) {
    for (let i = 0; i < collection.length; i++) {
      if (collection[i]["id"] === key)
        return collection[i];
    }
  }

}

Answer 1

您应该从subscribe到EventEmitter来捕获事件。您需要一个带有EventEmitter的服务

@Injectable()
export class MyService
{
    myEventEmiter:EventEmitter<void> = new EventEmitter<void>();
}

然后将inject服务放入组件并订阅它以捕获事件：

contsruct(protected myService:MyService){}

ngOnInit()
{
    this.myService.subscribe(
        () => { //An event occurs }
    );
}

另一方面，在另一个组件中，您应该使用emit EventEmitter来创建新事件：

this.myService.emit();

Answer 2

我使用一个事件通知其他要隐藏的实例，关于我的日期选择器组件。请跟随事件广播角-2

你必须创建一个广播公司和messageEvent。