javascript - 如何调用函数，如果 bool 值在 Angular2 中为真？

Question

我在这里写了一个弹出函数，一个 bool 标志是它们在我的组件类中。我的标志将根据我的条件返回 true 或 false。在模板类中，弹出函数需要在标志变为真时触发，然后我的弹出对话框会立即出现。但我不知道调用正确的方法，如果有人知道请帮助我正确的方法。

<ng-template #sessionSuccessModal let-c="close" let-d="dismiss">
	<div class="modal-header">
			<h4 class="modal-title">Include Criteria Error</h4>
			<button type="button" class="close" aria-label="Close" (click)="closeModel()">
			<span aria-hidden="true">&times;</span>
			</button>
	</div>
	<div class="modal-body"  class="bg-light text-dark">
			<p>{{ alertMessage }}!</p>
	</div>
	<div style="text-align: center" class="bg-light text-dark">
			<button type="button"  (click)="closeModel()">Ok</button>
	
	</div>
</ng-template>

最初 commaSeparation 将为 false，this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);此函数返回 true 或 false。如果是这样，那么我需要调用我的 displayModel() 警报方法。现在弹出窗口工作正常，调用 ngAfterViewInit() 但在控制台中出现错误。

ExpressionChangedAfterItHasBeenCheckedError:表达式在检查后已更改。先前的值:'ng-untouched: true'。当前值:'ng-untouched: false'

 ngAfterViewInit() {
        let controlBlurs: Observable<any>[] = this.formControls
            .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
// debounceTime(1000)/
        Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
            this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
           // this.valid = this.genericValidator.validateControls(this.orderUnitForm);
        });
        this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
            this.valid = this.genericValidator.validateControls(this.orderUnitForm);
            this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
              if(this.commaSeparation == true){
                this.displayModel();
              }
        });
  }

这是我的 dispalyModel() 函数:

displayModel() {
     this.alertMessage = 'You cannot enter more than one multiple at the same time ';
     this.successErrorModalBlock = this.modalService.open(this.sessionSuccessModalref);
   }

Answer 1

您可以通过实现作为 Angular 生命周期 Hook 的接口(interface) OnChanges 来实现这一点。

import { Component, OnChanges, SimpleChanges } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnChanges  {

  // the flag property
  commaSeparation: boolean;

  ngOnChanges(changes: SimpleChanges){
    if (changes['commaSeparation'] && changes['commaSeparation'].currentValue){
        this.showPopup();
    }
  }

  public showPopup(){
        alert('Replace this alert by the code that shows your popup');
  }
}

引用:https://angular.io/guide/lifecycle-hooks#onchanges