javascript - @Input 属性没有被第二次更新

Question

我正在创建一个可重用组件，它可以从任何外部组件显示，但可以使用同一组件中的函数隐藏，但不知何故父组件中的属性更改不会更新子组件。

这是相同的堆栈 Blitz 。 https://stackblitz.com/edit/angular-hfjkmu

我需要“显示”按钮始终显示组件，我可以随时使用“隐藏”按钮隐藏组件。

Answer 1

您需要使用 Output 将值从子级同步到父级

  @Input()
  show = false;

  @Output()
  showChange = new EventEmitter<boolean>();

  constructor() { }

  ngOnInit() {
  }

  hide(){
    this.show = false;
    this.showChange.emit(this.show);
  }

<app-show-hide [(show)]="show"></app-show-hide>

子组件的 show 属性不指向父组件中的相同属性，因为它是原始值。我不建议修改不属于子组件的数据(引用类型，例如:对象、数组)，它会导致意外行为。

带有引用类型的在线演示(修改引用类型时要小心):https://stackblitz.com/edit/angular-vhxgpo?file=src%2Fapp%2Fshow-hide-obj%2Fshow-hide-obj.component.ts enter link description here