保存組件狀態[角]

Question

我有一個組件（樹部件）它看起來像這樣：

<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> 

我有兩個層次，第二個層次是隱藏/在第一級單擊元素的名稱時顯示。

的問題是，每次我在第二級的節點上單擊時間，樹失去了它的狀態（關閉節點獲得再次打開，反之亦然）。

我知道這是因爲Angular的路由器是如何重新繪製所有組件的，我知道我可以使用本地存儲破解一些解決方案來堅持isCollpased的狀態，但我想知道是否有一個這樣我就可以使角記得組件的狀態，並自動應用它，甚至更好，只是重複使用它在某種程度上代替重新加載/重新繪製的。那可能嗎？

Answer 1

要重複使用相同的組件，你可以把它放在路由器出口標籤的外AppComponent：

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

這可能是像一個主菜單總是存在可以接受的。

你也可以使用一個名爲路由器網點 - 它們允許你有類似的I幀，所以當你點擊你的樹的鏈接，樹結構將保持不變，所需的內容會顯示在另一條出路。 https://angular.io/docs/ts/latest/guide/router.html#!#milestone-4 https://github.com/onehungrymind/ng2-named-router-outlets

但自定義狀態序列化的sessionStorage你提到的，是一個相當簡單的解決方案了。在ngOnInit（）嘗試加載狀態和ngOnDestroy（）堅持它。如果你需要在數個組件，它可以創建會（使用類似類變壓器打字稿庫）做任何組件的通用方法。