Angular 中的组件被破坏时如何获取先前的值

Question

我有组件并循环渲染它（ngFor）该组件有一个 object

@Input() a = {
name: 'Bob'
}

更改后，它将其输入参数重置为初始 state 当组件发生更改时，我想获取其初始初始化时的值 SCENARIO: -> @Input() a = {name: 'Bob'} ( init value) -> 然后做点什么... this.a.name = 'Alice' ; -> 在循环中，object 发生变化 -> 再一次，组件很重要@Input() a = {name: 'Bob'} (init value) 我想在组件更新后获取先前的值，即 '爱丽丝'

Answer 1

从angular 文档：

ngOnChanges(changes: SimpleChanges) {
  if(changes.a) {
    let chng = changes.a;
    let cur  = JSON.stringify(chng.currentValue);
    let prev = JSON.stringify(chng.previousValue);
  }
}

因此，您需要.currentValue和.previousValue属性来访问当前值和以前的值。

编辑：1

如果组件被破坏，您必须使用某种 state 管理 - 带有主题、会话存储、本地存储或其他内容的服务

编辑：2

您可以扩展 ngFor 指令并在 ngOnChanges 中添加 state 逻辑。

@Directive({
  selector: '[ngFor][ngForIn]'
})
export class NgForIn extends NgFor implements OnChanges {

  @Input() ngForIn: any;

  constructor(viewContainer: ViewContainerRef,
              template: TemplateRef<NgForRow>,
              differs: IterableDiffers,
              cdr: ChangeDetectorRef) {

    super(viewContainer, template, differs, cdr);
  }

  ngOnChanges(changes: SimpleChanges): void {
    // Do something here
  }

}