Javascript 在管线更改时保存元件状态[角度]

我在Angular 2中有一个组件（树小部件）

看起来是这样的：

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

{{foo.name}
{{bar.name}}

我有两个级别，第二个级别在单击第一个级别中的元素名称时隐藏/显示

问题是，每当我点击第二层的节点时，树就会失去它的状态（关闭的节点会再次打开，反之亦然）

---

我知道这是因为Angular的路由器是如何重新绘制所有组件的，我知道我可以利用本地存储破解一些解决方案来保持

isCollpased

的状态，但我想知道是否有一种方法可以让Angular记住组件的状态并自动应用，甚至更好，只是以某种方式重用它，而不是重新加载/重新绘制它。有可能吗？

要重用同一组件，可以将其放置在AppComponent中路由器出口标签的外部：

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

。。。

这可能是可以接受的东西，如一个主菜单，它总是存在

您还可以使用命名路由器出口-它们允许您拥有类似iFrame的内容，因此当您单击树中的链接时，树结构将保持不变，所需内容将显示在另一个出口中。

但是您提到的会话存储的自定义状态序列化也是一个相当简单的解决方案。在ngOnInit（）中尝试加载状态，并在ngOnDestroy（）中保持状态。如果您需要在多个组件中使用它，那么可以创建一个通用方法来为任何组件使用它（使用类转换器TypeScript库）