当从父级发送相同的值时如何检测@input属性的变化答案

【问题标题】：How to detect the changes in @input attribute when the same value is sent from parent当从父级发送相同的值时如何检测@input属性的变化
【发布时间】：2019-07-09 04:06:34
【问题描述】：

我进行了研究，但没有一个能够为我提供正确的解决方案。我有 2 个名为 parentComponent 和 childComponent 的组件。

childComponent.html

     <div *ngIf="isShowMessage">
       <p>Hey i was told by parent component to be shown Here i am !!!</p>
         <button (click)="cancel()">cancel</button>
     </div>

childComponent.ts

     _isShowMessage = false;

     @Input() set isShowMessage(value: boolean) {
          this._isShowMessage = value;
     }
      get isShowMessage(): boolean {
            return this._isShowMessage;
      }
     cancel(): void {
      this._isShowMessage = false;
      this.isShowMessage = false;
    }

父组件.html

      <childComponent [isShowMessage]="isShowMessage"></childComponent>
      <button (click)="handleClick()">save</button>

父组件.ts

        isShowMessage = false;
        handleClick(): void {
          this.isShowMessage = true;
         }

第 1 步：当我从父级单击保存按钮时，将显示子组件 div：

     <p>Hey i was told by parent component to be shown Here i am !!!</p>

第二步：当我从子组件单击取消按钮时，div 被隐藏。 [预期行为]

第 3 步：当我再次单击父级的保存按钮时，子组件 div 不显示。

是否由于第二次发送的相同值 true 也是如此？不确定 ... 任何建议表示赞赏。

【问题讨论】：

ngOnChanges 在 step3 的子组件中触发？

标签： angular angular6 angular2-changedetection

【解决方案1】：

您正在从父级向子级发送 ShowMessage，因此您正在对子组件进行更改。然后如果子级发生任何事件，请通过发出事件让父级知道，这样父级将与子级同步，如果父级再次更改该值在这种情况下，孩子将获得该值。

检查下面的编辑代码

childComponent.html

 <div *ngIf="isShowMessage">
   <p>Hey i was told by parent component to be shown Here i am !!!</p>
     <button (click)="cancel()">cancel</button>
 </div>

childComponent.ts

     _isShowMessage = false;

     @Input() set isShowMessage(value: boolean) {
          this._isShowMessage = value;
     }
    @Output() hideParentValue = new EventEmitter();
      get isShowMessage(): boolean {
            return this._isShowMessage;
      }
     cancel(): void {
     //comment this below code 
     // this._isShowMessage = false;
     // this.isShowMessage = false;

     //add this 
     this.hideParentValue.emit()
    }

父组件.html

  <childComponent [isShowMessage]="isShowMessage" 
     (hideParentValue)="hideMessage()"></childComponent>
          <button (click)="handleClick()">save</button>

父组件.ts

 isShowMessage = false;
        handleClick(): void {
          this.isShowMessage = true;
         }
         hideMessage():void {
          this.isShowMessage = false;
         }

如果还是有问题，你可以让子组件实现 OnChanges 接口，然后实现 ngOnChanges 函数并将调试器放在那里。

如果输入更改调试器应该命中 .. 您可以通过此生命周期挂钩找到问题的根本原因。

【讨论】：

【解决方案2】：

考虑这种方法：

父组件.html

<childComponent #child></childComponent>
<button (click)="handleClick(child)">save</button>

父组件.ts

handleClick(child): void {
  child.isShowMessage = true;
}

【讨论】：

这种方法有效，但如何？你能解释一下吗？
改变child.isShowMessage 基本上是你的目标。而这种方法直接做到这一点。