@Input 属性没有被第二次更新答案

【问题标题】：@Input property is not being updated second time@Input 属性没有被第二次更新
【发布时间】：2020-01-06 04:54:00
【问题描述】：

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

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

我需要“显示”按钮应该一直显示组件，我可以随时使用“隐藏”按钮隐藏组件。

【问题讨论】：

我更新了代码并为你添加了一些解释。干杯

标签： javascript angular typescript angular7

【解决方案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

【讨论】：

【解决方案2】：

您有问题，因为您的子组件修改了子组件范围内的输入值，因此父组件无法知道数据已更改

你的子组件

   export class ShowHideComponent implements OnInit {
      @Input('show') show: boolean;
      @Output() updateShowValue: EventEmitter<any> = new EventEmitter<
        any
        >();
      constructor() { }

      ngOnInit() {
        console.log(this.show);
      }

      hide() {
        this.updateShowValue.emit(!this.show);
      }
    }

在 app.component.html 中

<app-show-hide [show]="show" (updateShowValue)="update($event)"></app-show-hide>

还有 app.component.ts

export class AppComponent implements OnInit {
  show:boolean = false;
  ngOnInit() {
    this.show = false;
    console.log(this.show)
  }
  showComp(){
    this.show = !this.show;
  }

  update(event) {
    this.show = event;
  }
}

【讨论】：

我这样做了，但是当我使用子组件中的“隐藏”按钮隐藏组件时，我必须单击两次“显示”按钮才能再次显示子组件。我已经更新了堆栈闪电战。请检查。谢谢！
没有。这会解决这个问题吗？

【解决方案3】：

您需要在子组件中添加一个@Output，当您单击隐藏按钮（在子组件中）时，您需要通知您的父组件并将显示变量的值更改为false，这是通过EventEmitter完成的. 所做的更改是：

ShowHideComponent.ts

import { Component, OnInit, Input, Output, EventEmitter  } from '@angular/core';

@Component({
  selector: 'app-show-hide',
  templateUrl: './show-hide.component.html'
})
export class ShowHideComponent {
  @Input('show') show : boolean;
  @Output('') hideEE = new EventEmitter();
  constructor() { }

  hide(){
    this.hideEE.emit(false);
  }

}

AppComponent.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {

  show:boolean  = false;

}

appComponent.html

<button type="button" (click)="show = true">Show</button>

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

stackblitz Link

【讨论】：