Angular 4 Datenbindungskonzept

Question

Ich erstelle eine Angular App und benötige Hilfe bei der Datenbindung.

Ich habe ein Dashboard, wo ich verschiedene Widgets habe. Jedes Widget hat einen Namen und ein Datum. Zum Konfigurieren/Ändern dieser Einstellungen habe ich eine Sidebar erstellt, die angezeigt werden kann. Ich verwende einen Router, um die Dashboard-Ansicht anzuzeigen. Und die Sidebar ist keine Kinder des Armaturenbretts es ist außerhalb des Routers.

Wenn ich auf die Einstellungen-Schaltfläche auf einem Widget klicke, sollte sich die Sidebar öffnen und sollte in der Lage sein, die Einstellungen dieses Widgets anzuzeigen und zu ändern, und dann sollte das Widget eine Update-Funktion ausführen.

Ich habe bereits versucht, mit einem geteilten Dienst zu arbeiten, aber ich denke nicht, dass dies die beste Lösung ist, weil ich mehrere Widgets mit jeweils unterschiedlichen Einstellungen habe.

Answer 1

Ein gemeinsam genutzter Dienst ist ein guter Aufruf für dieses Szenario, da Sie in Ihrem router-outlet-Tag nicht an Ihr Klickereignis binden können.

Angenommen, Sie eine Komponente (Pseudo-Code) haben:

class MyWidget { 
    widgetData: Object; 
    constructor(private myService: MyService) { } 
    handleClick(event) { 
    this.myService.sendClick({event, data:this.widgetData}) 
    } 
} 

Dann in Ihrem Dienst, können Sie einen Subject verwenden Speicher, um die Daten zu halten, die für Ihre Sidebar Komponente benötigt wird.

Beispiel Dienst (psuedocode): Für eine andere Ressource

class Sidebar { 
    widgetData: Object; 
    constructor(private myService: MyService) { 
    myService.getClick() 
     .subscribe(v => doSomethingWithWidgetData(v)); 
    } 
} 

:

class MyService { 
    subject = new Subject(); 
    sendClick(data) { 
    this.subject.next(data); 
    } 
    getClick(data) { 
    return this.subject.asObservable(); 
    } 
} 

Schließlich Ihr Sidebar wird Subscribe zum getClick() Methode von Ihrem Service in der Lage sein, diese blogpost hat eine gute Erklärung dieses Konzepts.

Answer 2

Geteilter Dienst ist der Weg, über die Dinge hier zu gehen, Da es keine Eltern Kind Beziehung zwischen Komponenten gibt, können Sie nicht verwenden, Ereignis-Emitter. Wenn Sie die Dinge auf Vordermann bringen und für ein sauberes Designmuster gehen wollen, gehen Sie Ngrx Suite. Es ist Schneiderei für solche Szenarien, aber bedenken Sie, dass es einige zusätzliche Abhängigkeiten und auch etwas mehr Code benötigt.

Gehen Sie für Ngrx ist die App ist groß sonst Stick shared services.

Answer 3

Sie können keine Ereignisemitter verwenden, da keine Beziehung zwischen zwei Komponenten besteht. Daher wäre die Verwendung von Shared Service ideal.