Eckig, Was ist der beste Weg, um zwischen unabhängigen Komponenten zu kommunizieren?

Question

Ich habe zwei Komponenten in meiner Angular 4-Anwendung, sagen wir listComponent & searchComponent, die keine Beziehungen haben. Ich möchte eine Funktion in listComponent aufrufen, während ein Suchkriterium aus searchComponent ausgewählt wird. Welcher ist der beste und effizienteste Weg, dies auch in Anbetracht der Leistung zu tun?

Entweder:

1) I Ausgangsereignisse Wurzel können und die Datenänderungen machen einen Datendienst verwendet wird, das heißt, schalten die Komponente anzuzeigen und die Daten von einem gemeinsamen Dienst bekommen. Hier muss ich jedesmal ngAfterViewChecked() oder ngOnChange() aufrufen und einige Flags verwenden, um die neue Suche aus searchComponent auszuwählen.

2) Verwenden Sie ein rxjs/behavioralSubject im Datendienst und setzen Sie es von searchComponent und subskribieren Sie es in listComponent.

Answer 1

Wenn zwischen den beiden Komponenten eine Eltern/Kind-Verbindung besteht, sollten Sie @Input und @Output verwenden.

Also ich nehme an, dass die List-Komponente die Suchkriterien als Input-und Suchkomponente emittieren ein Ausgabeereignis einmal Element ausgewählt ist.

Auf diese Weise können Sie Ihre Listenkomponente auf ngOnChanges() aktualisieren, und wenn Sie die Listenkomponente nicht benachrichtigen möchten, außer wenn die Eingabe geändert wurde, verwenden Sie ChangeDetectionStrategy.OnPush.

Die zweite Möglichkeit, wie Sie erwähnt haben, ist die Verwendung von rxjs/behavioralSubject im separaten Dienst, wo Sie die Suchkriterien aus Ihrer Suchkomponente pushen und dieses Thema auf Ihrer Listenkomponente abonnieren.

Wenn es mehr Suchlogik gibt, können Sie die Vorteile der Verwendung von Diensten auf Angular nutzen und einen Suchdienst erstellen, der alle Suchlogik einschließlich Benachrichtigungskomponenten behandelt.

Answer 2

Mehrere Lösungen:

1 - Verwenden Sie einen Service. Sie sollte entweder Subjekte enthalten, die Ereignisse ausgeben, oder zumindest Daten, um die Daten zu speichern, die Sie in den beiden Komponenten festgelegt haben.

2 - Verwenden Sie die Ausgänge/Eingänge der übergeordneten Komponente.

3 - Verwenden Sie eine ViewChild-Komponente mit Ausgaben. Sobald die übergeordnete Komponente eine Ausgabe empfängt, ruft sie in den untergeordneten Komponenten über die untergeordnete Ansichtsbindung eine Metho- de auf.

Answer 3

Normalerweise verwende ich einen Dienst mit Themen

import {Injectable} from '@angular/core'; 
import {Observable, Subject} from "rxjs"; 

/** 
* Event Types 
*/ 
export const MyAppEventTypes = 
    { 
    EventType1: 'EventType1' 
//... 
    }; 
/** 
* Events 
*/ 
export class MyAppEvent 
{ 
    type: string; 
    data: any; 
} 

/** 
* Service in charge of broadcasting messages 
*/ 
@Injectable() 
export class MessageService 
{ 
    /** 
    * Subject to trigger events 
    * @type {Subject<MyAppEvent>} 
    */ 
    private myAppEventSubject: Subject<MyAppEvent> = new Subject<MyAppEvent>(); 

    /** 
    * The observable for events 
    * @type {"../../Observable".Observable<MyAppEvent>} 
    */ 
    public readonly myAppEvent$: Observable<MyAppEvent> = this.myAppEventSubject.asObservable(); 


    /** 
    * Broadcasts a message 
    * @param name 
    * @param data 
    */ 
    broadcast(name: string, data) 
    { 
    this.myAppEventSubject.next(
     { 
     type: name, 
     data: data 
     }); 
    } 
} 

in einer Klasse Dann die eine Nachricht senden muss, nachdem

Und in einer Klasse den Dienst Injektion, die die empfangen muss Nachricht, nach dem Einspritzen des Dienstes

this.messageService.myAppEvent$.subscribe(ev => { 
     if (ev.type == MyAppEventTypes.EventType1) 
     { 
     this.data = ev.data; 
     } 
    }); 

Answer 4

Ich denke, die beste Lösung ist Usin g ngrx. Ich benutze dies einige Male und es ist ideal für ein Problem wie folgt.