Как обнаружить изменения в атрибуте @input при отправке одного и того же значения из родительского

Question

Я исследовал, и никто из них не смог дать мне правильного решения проблемы.У меня есть 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;
         }

Шаг 1: когда я нажимаю кнопку «Сохранить» у родителя, показывается div дочернего компонента:

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

Шаг 2: Когда я нажимаю кнопку «Отмена» из дочернего компонента,Див скрыт.[ожидаемое поведение]

шаг 3: когда я снова нажимаю кнопку сохранения от родительского элемента, дочерний компонент div НЕ отображается.

из-за того же значения true отправлено также во второй раз?не уверен ... любое предложение приветствуется.

Answer 1

Вы отправляете ShowMessage от родителя к потомку и, соответственно, вносите изменения в дочерний компонент. Затем, если какое-либо событие произойдет в потомке, сообщите об этом родителю, отправив событие, чтобы родительский элемент был синхронизирован с дочерним, и если родительский объект снова изменит это значение.в этом случае 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;
         }

Если проблема не устранена, вы можете сделать дочерний компонент для реализации интерфейса OnChanges, а затем реализовать функцию ngOnChanges иПоместите отладчик туда.

если отладчик изменения входа должен ударить .. вы можете найти основную причину вашей проблемы с помощью этого хука жизненного цикла.

Answer 2

Рассмотрим этот подход:

ParentComponent.html

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

ParentComponent.ts

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