Des Événements mondiaux Angulaire

Il n'y a pas d'équivalent à $scope.emit() ou $scope.broadcast() d'AngularJS.
EventEmitter à l'intérieur d'un composant est proche, mais comme vous l'avez mentionné, il n'émettent qu'un événement pour le parent immédiat composant.

Angulaire, il existe d'autres alternatives qui je vais essayer de l'expliquer ci-dessous.

@Input() liaisons permet l'application du modèle à être connecté à une orientée objet graphique (de la racine vers les feuilles). Le comportement par défaut d'un composant détecteur de changement de stratégie est de propager toutes les modifications apportées à un modèle d'application pour toutes les liaisons à partir de tout appareil connecté.

De côté: Il y a deux types de modèles: les Modèles de Vue et des Modèles d'Application. Un modèle d'application est connecté via @Input() liaisons. Un modèle de vue est juste une propriété d'un composant (non décorée avec @Input()) qui est lié à la composante du modèle.

Pour répondre à vos questions:

Que faire si j'ai besoin de communiquer entre frère composants?

1. Partagé De L'Application Du Modèle:
   Les frères et sœurs peuvent communiquer grâce au partage d'un modèle d'application (tout comme angulaire 1). Par exemple, quand un enfant fait un changement pour un modèle, une autre sœur qui a les fixations pour le même modèle est mis à jour automatiquement.

2. Les Événements du composant de l'Enfant: les composants peuvent émettre un événement pour le composant parent à l'aide de @Output() liaisons. Le composant parent peut gérer l'événement, et de manipuler le modèle d'application ou de son propre modèle de vue. Des modifications à l'Application du Modèle sont automatiquement propagées à tous les composants qui, directement ou indirectement lier le même modèle.

3. Événements de Service: les Composants peuvent s'abonner à des événements de service. Par exemple, deux frère les composants peuvent s'abonner au service même de l'événement et d'y répondre par la modification de leurs modèles respectifs. En savoir plus sur ce ci-dessous.

Comment puis-je communiquer entre un composant Racine et un élément imbriqué plusieurs niveaux de profondeur?

1. Partagé de l'Application du Modèle: Le modèle d'application peut être passé à partir de la Racine élément profondément imbriquée des sous-éléments via @Input() liaisons. Les modifications apportées à un modèle à partir de n'importe quel composant est automatiquement étendue à tous les composants qui partagent le même modèle.
2. Événements de Service: Vous pouvez également déplacer le EventEmitter à un service partagé, qui permet à n'importe quel composant d'injecter le service et de vous abonner à l'événement. De cette façon, un composant Racine peut appeler une méthode de service (généralement la mutation du modèle), qui à son tour émet un événement. Plusieurs calques, un grand-composant enfant qui a également injecté le service et souscrit à un même événement peut s'en occuper. Tout gestionnaire d'événements qui change une Application partagée Modèle, est automatiquement étendue à tous les composants qui en dépendent. C'est probablement l'équivalent le plus proche de $scope.broadcast() Angulaires 1. La section suivante décrit cette idée plus en détail.

Exemple d'une Observable Service qui utilise les Événements de Service pour Propager les Modifications

Voici un exemple d'une observable service qui utilise les événements de service pour propager les modifications. Quand un TodoItem est ajouté, le service émet un événement de la notification de ses composants abonnés.

export class TodoItem {
    constructor(public name: string, public done: boolean) {
    }
}
export class TodoService {
    public itemAdded$: EventEmitter<TodoItem>;
    private todoList: TodoItem[] = [];

    constructor() {
        this.itemAdded$ = new EventEmitter();
    }

    public list(): TodoItem[] {
        return this.todoList;
    }

    public add(item: TodoItem): void {
        this.todoList.push(item);
        this.itemAdded$.emit(item);
    }
}

Ici est de savoir comment un composant racine serait de vous inscrire à l'événement:

export class RootComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        //do something with added item
        this.addedItem = item;
    }
}

Un composant enfant imbriquées à plusieurs niveaux de profondeur serait de vous inscrire à l'événement de la même façon:

export class GrandChildComponent {
    private addedItem: TodoItem;
    constructor(todoService: TodoService) {
        todoService.itemAdded$.subscribe(item => this.onItemAdded(item));
    }

    private onItemAdded(item: TodoItem): void {
        //do something with added item
        this.addedItem = item;
    }
}

Ici est le composant qui appelle le service pour déclencher l'événement (il peut se trouver n'importe où dans le volet de l'arborescence):

@Component({
    selector: 'todo-list',
    template: `
         <ul>
            <li *ngFor="#item of model"> {{ item.name }}
            </li>
         </ul>
        <br />
        Add Item <input type="text" #txt /> <button (click)="add(txt.value); txt.value='';">Add</button>
    `
})
export class TriggeringComponent{
    private model: TodoItem[];

    constructor(private todoService: TodoService) {
        this.model = todoService.list();
    }

    add(value: string) {
        this.todoService.add(new TodoItem(value, false));
    }
}

Référence: La Détection de changement dans Angulaire

Je suis en utilisant un service de messagerie qui encapsule une rxjs Subject (Tapuscrit)

Plunker exemple: Message de Service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter'
import 'rxjs/add/operator/map'

interface Message {
  type: string;
  payload: any;
}

type MessageCallback = (payload: any) => void;

@Injectable()
export class MessageService {
  private handler = new Subject<Message>();

  broadcast(type: string, payload: any) {
    this.handler.next({ type, payload });
  }

  subscribe(type: string, callback: MessageCallback): Subscription {
    return this.handler
      .filter(message => message.type === type)
      .map(message => message.payload)
      .subscribe(callback);
  }
}

Composants abonnez-vous et les événements de diffusion (expéditeur):

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'sender',
  template: ...
})
export class SenderComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];
  private messageNum = 0;
  private name = 'sender'

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe(this.name, (payload) => {
      this.messages.push(payload);
    });
  }

  send() {
    let payload = {
      text: `Message ${++this.messageNum}`,
      respondEvent: this.name
    }
    this.messageService.broadcast('receiver', payload);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

(récepteur)

import { Component, OnDestroy } from '@angular/core'
import { MessageService } from './message.service'
import { Subscription } from 'rxjs/Subscription'

@Component({
  selector: 'receiver',
  template: ...
})
export class ReceiverComponent implements OnDestroy {
  private subscription: Subscription;
  private messages = [];

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('receiver', (payload) => {
      this.messages.push(payload);
    });
  }

  send(message: {text: string, respondEvent: string}) {
    this.messageService.broadcast(message.respondEvent, message.text);
  }

  clear() {
    this.messages = [];
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

La subscribe méthode de MessageService retourne un rxjs Subscription objet, qui peut être désabonné de la sorte:

import { Subscription } from 'rxjs/Subscription';
...
export class SomeListener {
  subscription: Subscription;

  constructor(private messageService: MessageService) {
    this.subscription = messageService.subscribe('someMessage', (payload) => {
      console.log(payload);
      this.subscription.unsubscribe();
    });
  }
}

Aussi voir cette réponse: https://stackoverflow.com/a/36782616/1861779

Plunker exemple: Message de Service

Vous pouvez utiliser EventEmitter ou observables pour créer un eventbus service que vous vous inscrivez avec DI. Tous les composants qui veut participer seulement les demandes de service en tant que paramètre du constructeur et émet et/ou s'abonne aux événements.

Voir aussi

• https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectionnel-service
• Délégation: EventEmitter ou Observables dans Angular2

J'ai créé un pub-sous-échantillon ici:

http://www.syntaxsuccess.com/viewarticle/pub-sub-in-angular-2.0

L'idée est d'utiliser RxJs Sujets de fil d'un Observateur et et Observables comme une solution générique pour l'émission et à la souscription à des événements personnalisés. Dans mon exemple j'utilise un client de l'objet à des fins de démonstration

this.pubSubService.Stream.emit(customer);

this.pubSubService.Stream.subscribe(customer => this.processCustomer(customer));

Voici une démo en live ainsi:
http://www.syntaxsuccess.com/angular-2-samples/#/demo/pub-sub

Nous avons mis en place un ngModelChange observables directive qui envoie tous les changements dans le modèle par le biais d'un événement de l'émetteur que vous instanciez dans votre propre composant. Il vous suffit de lier votre événement émetteur de la directive.

Voir: https://github.com/atomicbits/angular2-modelchangeobservable

En html, lier votre événement émetteur (countryChanged dans cet exemple):

<input [(ngModel)]="country.name"
       [modelChangeObservable]="countryChanged" 
       placeholder="Country"
       name="country" id="country"></input>

Dans votre fichier d'enregistrement de composant, de faire des opérations asynchrones sur le EventEmitter:

import ...
import {ModelChangeObservable} from './model-change-observable.directive'


@Component({
    selector: 'my-component',
    directives: [ModelChangeObservable],
    providers: [],
    templateUrl: 'my-component.html'
})

export class MyComponent {

    @Input()
    country: Country

    selectedCountries:Country[]
    countries:Country[] = <Country[]>[]
    countryChanged:EventEmitter<string> = new EventEmitter<string>()


    constructor() {

        this.countryChanged
            .filter((text:string) => text.length > 2)
            .debounceTime(300)
            .subscribe((countryName:string) => {
                let query = new RegExp(countryName, 'ig')
                this.selectedCountries = this.countries.filter((country:Country) => {
                    return query.test(country.name)
                })
            })
    }
}

Une autre façon de communiquer entre les composants et services est avec les Événements fournisseur utilisé dans Ionique.

Je préfère le "publier" et "s'abonner" synthax, plus lisible à mon avis.

Il suffit de copier ce service à vos Angulaire du projet.

import {Injectable} from '@angular/core';

export type EventHandler = (...args: any[]) => any;

@Injectable({
    providedIn: 'root',
})
export class Events {
    private c = new Map<string, EventHandler[]>();

/**
 * Subscribe to an event topic. Events that get posted to that topic will trigger the 
provided handler.
 *
 * @param topic the topic to subscribe to
 * @param handler the event handler
 */
subscribe(topic: string, ...handlers: EventHandler[]) {
    let topics = this.c.get(topic);
    if (!topics) {
        this.c.set(topic, topics = []);
    }
    topics.push(...handlers);
}

/**
 * Unsubscribe from the given topic. Your handler will no longer receive events published to this topic.
 *
 * @param topic the topic to unsubscribe from
 * @param handler the event handler
 *
 * @return true if a handler was removed
 */
unsubscribe(topic: string, handler?: EventHandler): boolean {
    if (!handler) {
        return this.c.delete(topic);
    }

    const topics = this.c.get(topic);
    if (!topics) {
        return false;
    }

    //We need to find and remove a specific handler
    const index = topics.indexOf(handler);

    if (index < 0) {
        //Wasn't found, wasn't removed
        return false;
    }
    topics.splice(index, 1);
    if (topics.length === 0) {
        this.c.delete(topic);
    }
    return true;
}

/**
 * Publish an event to the given topic.
 *
 * @param topic the topic to publish to
 * @param eventData the data to send as the event
 */
publish(topic: string, ...args: any[]): any[] | null {
    const topics = this.c.get(topic);
    if (!topics) {
        return null;
    }
    return topics.map(handler => {
        try {
            return handler(...args);
        } catch (e) {
            console.error(e);
            return null;
        }
    });
}
}

Plus d'informations sur Ionique Événements: Ionique Événements Doc