сеттер и геттер для Angular - PullRequest
Новая
       39

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

0 голосов
/ 26 июня 2019

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

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

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

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

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

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

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

a.html 

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

b.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
    });
}

1 Ответ

0 голосов
/ 26 июня 2019

Вы можете использовать хук жизненного цикла 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>

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

test: SimpleChange, currentValue: "2", firstChange: true, previousValue: undefined

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

...