Question

在这里，我编写了一个弹出函数，并且在我的组件类中有一个布尔标志。根据我的条件，我的标志将返回true或false。在模板类中，当flag为true时，需要触发popup函数，然后我的弹出对话框将立即出现。但是我不知道应该使用正确的方法，如果有人知道，请帮助我正确的方法。

<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（），但在控制台之类的地方却出错。

ExpressionChangedAfterItHaHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：“ 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

您可以通过实现接口OnChanges来实现这一点，该接口是Angular的生命周期挂钩。

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

Answer 2

通常，在角表达式内调用具有副作用的函数是个坏主意。 Angular可以自由调用这些函数，但是经常喜欢确保结果仍然相同。您应该在这些表达式中使用函数来返回结果，而不是引起动作。

我建议改为从您的控制器调用popupAlert，例如

$scope.$watch('commaSeparation', function(commaSeparation) {
        // The value of commaSeparation has just changed. Alert if it changed to true!
        if (commaSeparation) {
            popupAlert();
        }
    });

Answer 3

如果commaSeparated是输入属性，则可以使用ngOnChanges生命周期挂钩添加属性更改 watcher ，然后在{{1} }已更改（link to docs）。

popupAlert

如果仅在组件内部更改commaSeparation，则可以将其设置为私有并与getter / setter对一起触发弹出窗口：

@Component({
...
})
export class MyComponent implements OnChanges {

  // ...

  @Input()
  commaSeparation = false;

  // ...

  ngOnChanges(changes: SimpleChanges) {
    const commaSeparationChanges = changes.commaSeparation;

    if (commaSeparationChanges && commaSeparationChanges.currentValue) {
      this.popupAlert();
    }
  }
}

如果Angular2中的Boolean为true，如何调用函数？

3 个答案: