Как сохранить последние изменения компонентов?

Question

Существует компонент, который активируется условием ngif.

Использование может выполнять действия, например, открывать меню, задавать активный элемент или просто писать текст внутри текстовой области.

После этого пользователь покидает это компонент в другой ngif.

Через некоторое время пользователь возвращается к предыдущему компоненту.

Как восстановить последнее действие, изменения компонентов для продолжения работы?

Я знаю, это может быть решено используя сервис, но у компонента mu тоже есть свой лог c.

Answer 1

Поскольку директива ngIf всегда уничтожает компоненты, которые не удовлетворяют условию, вы не должны использовать ngIf, чтобы "переключать" компоненты, которые хранят живые данные внутри, не сохраняя их где-то еще, когда они уничтожаются. Я предлагаю использовать CSS для переключения видимости компонентов.

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

Таким образом, вы скрываете его от пользовательского интерфейса, пока он все еще работает.

Answer 2

Вы должны использовать охрану canDeactivated, которую он вызовет до ngOnDestroy.

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

Answer 3

с ngIf компонент уничтожается и создается на основе значения. Я думаю, что вы должны сохранить данные в компоненте хоста в хуке OnDestroy рассматриваемого компонента, используя @output и обрабатывая это событие в компоненте хоста, и использовать @input для передачи данных в компонент, когда вам нужно.

ParentComponent HTML

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

ParentComponent .ts

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

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

ChildComponent .ts

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

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

Вы могли бы что-то сделать в этих строчках, надеюсь, вы поняли идею.