Ich bin neu in eckigen. Ich erstelle eine Login-Komponente, es funktioniert gut, aber das Problem ist, dass ich ein separates Layout der Anmeldung von der ganzen App will. Was ändert sich dafür?
Ich suche auf Google aber jeder gibt eine diff-Lösung, die auch nicht verständlich ist.
%Vor%In app.component.html
%Vor% In Ihrem app.component.html :
Dann erstellen Sie MainComponent (main.component.ts) und legen Sie Ihr Haupt-App-Layout in main.component.html :
Diese Komponente wird für jede Ihrer normalen App-Komponenten übergeordnet.
Dann in Ihrer LoginComponent anderen Layout ohne Router-outlet, zum Beispiel:
%Vor%Ändern Sie dann Ihr Routing so:
%Vor%So wird MainComponent alle wiederverwendbaren Layouts und die App-Struktur für jede untergeordnete Komponente enthalten, während LoginComponent unabhängig ist und ein eigenes Layout hat.
In der "most" übergeordnete Komponente können Sie .subscribe zu router.events data und sobald Sie die Login-Komponente als aktive Route getroffen haben, wird diese Komponente benachrichtigt und fügt ein css class oder id für hinzu das andere Layout (Thema), das du willst (vielleicht wäre das in einer partiellen scss-Datei gekapselt - wenn du nicht scss / sass verwendest, solltest du es vielleicht in Erwägung ziehen).
Sobald Sie die Route geändert haben (außer Login), ist die Klasse verschwunden und das "benutzerdefinierte" (andere) Layout wird nicht mehr angewendet.
Ich hoffe, das könnte helfen. Sie können immer einen @Output / @Input() oder einen Shared Singleton-Dienst mit Observables (für Nicht-Parent-Kind-Komponenten-Beziehungen) verwenden, um den Status zwischen diesen Komponenten zu teilen und basierend auf Statusänderungen Dinge zu tun. Wenn Sie irgendwelche Fragen / Kommentare haben, fühlen Sie sich frei, sie hinzuzufügen. Ich denke, eckige Dokumente können bei den Implementierungsdetails helfen.
Tags und Links angular angular2-routing