Sollten Komponenten ihre eigenen Daten in angular2 laden

Question

Meine App hat eine Homepage, die eine komplexe Datentabelle Komponente enthält. Momentan lädt die Home-Komponente alle Dienste und fügt sie dann in die Datentabelle ein, was ziemlich einfach ist, aber komplexer wird, wenn ich einige Daten auf beispielsweise ein Zeilenklick-Ereignis laden muss.

Meine Frage ist: Ist es besser, wenn die Seite geladen Dienste und dann die Daten in die Komponenten injiziert oder sollten Komponenten sorgen sich um sie selbst? Ich möchte mit Best Practice beginnen und zukünftige Fallstricke vermeiden

Answer 1

Es ist eine Entscheidung, die Sie für jede Komponente basierend auf dem Szenario treffen müssen, da alles auf den Anwendungsfall zurückzuführen ist.

Ich würde sagen, Ihre Komponente (n) sollte nur die Dienste konsumieren und Daten anfordern. Es sollte egal sein, wie & von wo die Daten abgerufen werden, wie es unten ist, um zu bedienen, wie die & wo Teil behandelt.

Denken Sie über Ihre Komponenten als intelligente und dumme Komponenten nach.

Smart (Stateful) Komponente verbraucht Dienst (e) zum Abrufen von Daten und verwendet diese Daten in seiner Vorlage.

Dumm (zustandslos) Komponente wird nur für die Präsentation für den Benutzer verwendet werden und erwartet Daten durch Eingabe verbindlich als Eigenschaft. Daher erwartet diese Komponente immer Daten von einer übergeordneten Komponente. Wenn es alle erforderlichen Daten mithilfe von Bindungen erhält, funktioniert es überall in Ihrer App.

Konzept der Komponente:

Die Idee hinter dem Konzept der Komponenten ist klein Teile der Anwendung zu machen und sie wiederverwendbar machen. Das ist also eine Entscheidung, die Sie treffen müssen, um zu sehen, wie wiederverwendbar Ihre Komponente sein soll.

Beispiel: Wir haben eine Produkt-Liste Komponente und Produkt-Detail-Komponente. Die Produktlistenkomponente verwendet einen Service namens ProductService, um Daten abzurufen.

Case-1: Wenn Ihre App muss nur einen Blick, wo Produkt-Detail wird immer innerhalb Produkt-Liste Komponente als verschachtelte Komponente vorhanden sind, müssen Sie nur eine intelligente Komponente dieser Liste Komponente machen.

Wenn ein Produktelement ausgewählt ist, übergibt es dieses Element mithilfe einer Eingabeeigenschaft namens product an die Produktdetailkomponente.

In diesem Fall müssen Sie keinen weiteren HTTP-Aufruf durchführen, um das Produktdetail zu erhalten, wenn alle Informationen, die der Benutzer benötigt, bereits beim ersten Aufruf vorhanden waren.

Wenn Sie sagen, dass Sie nur Unterproduktinformationen des ausgewählten Produkts hatten, dann schauen Sie sich Fall 2 unten an.

Case-2: Wenn Ihre Anwendung benötigen Produkt-Detail an anderer Stelle ohne übergeordnete Liste haben, dann lassen Sie dieses Produkt-Detail-Komponente Service direkt konsumieren.

Also, dass dies eine eigenständige Komponente sein wird und nicht auf andere Komponenten angewiesen ist.

Diese Komponente benötigt nur eine Produkt-ID als Eingabe und wird Service verwenden, um Produktdetails für diese Produkt-ID abzurufen. Diese Komponente kann also überall in der Anwendung verwendet werden, einschließlich in der Produktlistenkomponente, wo Sie einfach die ID des ausgewählten Produkts an diese Komponente übergeben.

I have a blog post verwendet die Produktliste und die Produktdetailkomponente, in der beide einen Dienst zum Abrufen von Daten verwenden.

Answer 2

Dies ist die gesamte 'Smart vs Präsentation' Komponenten (oder Stateful vs zustandslose Komponenten) Diskussion wieder. Angular University has a blog article about this wenn Sie mehr lesen möchten.

Die grundlegende Beratung ist die Anzahl der Komponenten zu begrenzen, die mit Datenempfangsdienste interagieren und haben so viele Ihrer Komponenten, wie Sie ihre Daten von den Eingängen empfangen und Daten aus als Ausgänge senden. Eine Komponente, die dies tut, wird als staatenlos/präsentativ/dumm betrachtet, weil all ihre Daten ausschließlich von ihren Eingaben kommen. Es ist wie eine reine Funktion in einer Programmiersprache - eine reine Funktion einfacher ist, über die Vernunft, weil es keine Nebenwirkungen und dessen Rückgabewert hängt ausschließlich von seinen Eingängen.

Wenn die Mehrheit Ihrer Komponenten als Präsentations-/stumm Komponenten aufgebaut ist, es führt hoffentlich zu einem weniger komplexen System über die Vernunft.