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

Question

我进行了研究，其中 none 能够为我提供正确的问题解决方案。我有 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;
    }

ParentComponent.html

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

ParentComponent.ts

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

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

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

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

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

是不是因为第二次也发送了相同的值true？不确定 ... 任何建议表示赞赏。

Answer 1

考虑这种方法：

ParentComponent.html

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

ParentComponent.ts

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

Answer 2

您正在将 ShowMessage 从 parent 发送到 child，因此您正在 child 组件中进行更改。然后如果 child 中发生任何事件，让 parent 通过发送事件知道，因此 parent 将与 child 同步，如果 parent 再次更改该值，在这种情况下 child 将获得该值。

检查下面编辑的代码

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()
    }

ParentComponent.html

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

ParentComponent.ts

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

如果还是有问题可以制作child组件来实现OnChanges接口，然后实现ngOnChanges函数，把debugger放在那里。

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

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

How to detect the changes in @input attribute when the same value is sent from parent

angular2-changedetection

angular

angular6