Speichern Komponentenstatus auf Routenänderung [Angular]

Question

ich eine Komponente (Baum-Widget) haben in Schräg 2.

Es sieht wie folgt aus:

<div *ngFor="let foo in foos"> 
    <span (click)="isCollapsed[foo.id] = !isCollapsed[foo.id]">{{ foo.name }}</span> 
    <div class="container" [ngClass]="{'hidden': isCollapsed[foo.id]}"> 
     <div *ngFor="let bar in foo.bars"> 
      <a [routerLink]=".......">{{ bar.name }}</a> 
     </div> 
    </div> 
</div> 

Ich habe zwei Ebenen, die zweite Ebene versteckt/Wird angezeigt, wenn auf den Namen eines Elements in der ersten Ebene geklickt wird.

Das Problem ist, dass jedes Mal, wenn ich auf einen Knoten in der zweiten Ebene klicke, der Baum seinen Status verliert (geschlossene Knoten werden wieder geöffnet und umgekehrt).

Ich verstehe, dass dies daran liegt, wie Angulars Router alle Komponenten neu zeichnet, und ich weiß, dass ich eine Lösung mit lokalem Speicher hacken könnte, um den Zustand isCollpased beizubehalten, aber ich frage mich, ob es ein So kann ich Angular dazu bringen, sich an den Zustand der Komponente zu erinnern und sie automatisch anzuwenden oder besser noch, sie einfach irgendwie wiederzuverwenden, anstatt sie neu zu laden/neu zu zeichnen. Ist das möglich?

Answer 1

die gleiche Komponente wieder zu verwenden, können Sie es außerhalb des Routers-outlet-Tag in AppComponent platzieren können:

<your-tree-structure>...</your-tree-structure> 
<router-outlet></router-outlet> 

Das ist für so etwas wie ein Hauptmenü akzeptabel sein könnte, die immer vorhanden ist.

Sie können auch benannte Router-Anschlüsse verwenden - sie ermöglichen Ihnen, so etwas wie iframes zu haben. Wenn Sie auf einen Link in Ihrem Baum klicken, bleibt die Baumstruktur intakt und der gewünschte Inhalt wird in einer anderen Steckdose angezeigt. https://angular.io/docs/ts/latest/guide/router.html#!#milestone-4 https://github.com/onehungrymind/ng2-named-router-outlets

Aber der Brauch Zustand Serialisierung Sie erwähnt session, ist eine ziemlich einfache Lösung zu. Versuchen Sie in ngOnInit() den Status zu laden und in ngOnDestroy() persistent zu lassen. Wenn Sie es in mehreren Komponenten benötigen, ist es möglich, eine generische Methode zu erstellen, die dies für jede Komponente tun würde (mit einer ClassScript-TypeScript-Bibliothek).