Question

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

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

问题在于每次我点击第二级节点时，树都会失去它的状态（关闭的节点再次打开，反之亦然）。

我知道这是因为Angular的路由器正在重新绘制所有组件，我知道我可以使用本地存储破解某些解决方案以保持isCollpased的状态，但我和＃39;我想知道是否有一种方法可以让Angular记住组件的状态并自动应用它，甚至更好，只需重复使用它而不是重新加载/重绘它。这可能吗？

Answer 1

要重复使用相同的组件，可以将其放在AppComponent中的router-outlet标签之外：

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

对于像总是存在的主菜单这样的东西来说，这是可以接受的。

您还可以使用命名路由器插座 - 它们允许您使用iframe这样的内容，因此当您单击树中的链接时，树结构将保持不变，并且所需内容将显示在另一个插座中。 https://angular.io/docs/ts/latest/guide/router.html#!#milestone-4 https://github.com/onehungrymind/ng2-named-router-outlets

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

路线更改时保存组件状态[Angular]

1 个答案: