如何保存最后的组件更改？

Question

存在由条件 ngif 激活的组件。

使用可以执行 activity，例如打开菜单、设置活动元素或仅在文本区域内写入文本。

在该用户将此组件留给另一个 ngif 之后。

用户 returns 到上一个组件后。

如何恢复最后 activity、组件更改以继续工作？

我知道，使用服务可能会解决，但是mu组件也有它自己的逻辑。

Answer 1

with ngIf 组件被销毁并根据值创建。我认为您应该将数据保存在相关组件的 OnDestroy 挂钩中的主机组件中，使用@output 并在主机组件中处理此事件，并在需要时使用@input 将数据传递给组件。

父组件HTML

<app-child-component *ngIf="showThisComponent == 'comp1' " (saveData)="onSaveData($event)" [showData]="showThisData[comp1]" 
/>

父组件.ts

onSomeAction() {
    this.showThisComponent = 'comp1';
}

onSaveData(data) {
    this.showThisData[comp1] = data;
}

子组件.ts

@Input() showData: any;
@Output() saveData: new EventEmitter<any>();

ngOnDestroy() {
    this.saveData.emit(data);
}

你可以在这些方面做些事情我希望你明白了。

Answer 2

因为 ngIf 指令总是销毁不满足条件的组件，所以你不应该使用 ngIf 到 "toggle" 将实时数据存储在内部而不存储在其他地方的组件当它被摧毁时。我建议改用 CSS 来切换组件可见性。

<your-component [ngStyle]="{'display' : yourToggleExpressions ? 'none' : 'block'}"><your-component/>

这样，当它仍然运行落后时，你就可以从 UI 中隐藏它。

Answer 3

你应该使用 canDeactivated 守卫，它将在 ngOnDestroy 之前调用。

interface CanDeactivate<T> { 
   canDeactivate(component: T, 
      currentRoute: ActivatedRouteSnapshot,
      currentState: RouterStateSnapshot,
      nextState?: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean
}

如何保存最后的组件更改？

How to save last components changes?

angular

angular6

angular8