сеттер и геттер для Angular

В angular есть встроенная структура диалога действий, которую я должен использовать для отображения всплывающего окна действия, когда showDialog = true.

Диалоговое окно действия будет отображаться, когда showDialog=true, иначе диалоговое окно действия будет скрыто, когда showDialog=false

Приходится использовать методы установки и получения для вызова метода отмены, когда showDialog = false.

Однако при отладке кода он продолжает проверять методы получения и установки, даже если я не запускаю диалоговое окно действия.

Есть ли способ, которым я мог бы использовать метод жизненного цикла в Angular для сравнения предыдущего значения и текущего логического значения showDialog. Пример: если previousValue.showDialog != currentValue.showDialog, то вызовите только get showDialog(), set showDialog() и cancel().

Я думал об использовании какого-то метода жизненного цикла в Angular, например ngAfterViewInit(). Знаете ли вы, как сохранить предыдущее логическое значение showDialog, чтобы я мог сравнить его с текущим значением showDialog.

В React я мог бы использовать getDerivedStateFromProps, который имеет значение prev props, но знаете ли вы, есть ли аналогичный метод в Angular.

а.html

   <action-dialog [(openDialog)]="showDialog"/>

б.html

      <button (click)="showDialog = true">
                    {{intl.cleanNow | uppercase}}
      </button>

a.ts

  get showDialog() {
      return this._showDialog;
   }

  set showDialog(val){
    if (val === false) {
        this.cancel();
    } else if (val === true) {
        this._showDialog = true;
    }
}

 cancel() { 
    this.showDialog = false;
    this.form.reset({
        throttle: this._originalThrottle || 50
    });
}

angular getter-setter angular-lifecycle-hooks
person noob    schedule 25.06.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать хук жизненного цикла ngOnChanges. Этот хук жизненного цикла получает переменную типа simpleChanges, и одно из ее значений является предыдущим значением.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnChanges {
  @Input() test: string;
  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
  }

  ngOnInit() { }
}

Вот как вы вызываете этот компонент из родительского компонента:

<app-test [test]="'2'"></app-test>

Это будет консоль:

тест: SimpleChange, текущее значение: "2", первое изменение: правда, предыдущее значение: не определено

Таким образом, вы можете узнать текущее значение, предыдущее значение и даже было ли это первое изменение или нет.

person Udi Mazor    schedule 25.06.2019
comment
Спасибо, но ngOnChanges вызывается только один раз, когда компонент загружается в первый раз. В приведенном выше сценарии есть ли способ, которым код может обнаружить изменения после загрузки компонента, и когда пользователь нажимает кнопку cleanNow, он проверяет предыдущее значение и текущее значение. - person noob; 26.06.2019
comment
Не мой друг. ngOnChanges будет срабатывать каждый раз при изменении входного параметра в вашем компоненте, а не только в первый раз. Вот почему у него есть свойство previousValue. - person Udi Mazor; 26.06.2019
comment
Спасибо за ваше предложение, я попробовал, это не работает, потому что ‹actionDialog/› находится в child.html, а метод getter/setter также определен в child.ts. Может быть, я могу использовать ngDoCheck()? - person noob; 26.06.2019
comment
Не используйте ngDoCheck. Его цель — распространить обнаружение изменений с одного компонента на другой. Вам не нужен там код, потому что вы хотите изменить обнаружение как можно быстрее. Я не мог понять, почему это не должно работать. Можете ли вы создать stackblitz вашей проблемы? - person Udi Mazor; 26.06.2019