保存组件状态[角]

我有一个组件（树部件）它看起来像这样：保存组件状态[角]

<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的状态，但我想知道是否有一个这样我就可以使角记得组件的状态，并自动应用它，甚至更好，只是重复使用它在某种程度上代替重新加载/重新绘制的。那可能吗？

来源

2017-04-03 alexandernst

要重复使用相同的组件，你可以把它放在路由器出口标签的外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（）坚持它。如果你需要在数个组件，它可以创建会（使用类似类变压器打字稿库）做任何组件的通用方法。

来源

2017-04-03 17:04:24

保存组件状态[角]

回答

相关问题