首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如果Angular2中的Boolean为真,如何调用函数?

如果Angular2中的Boolean为真,如何调用函数?
EN

Stack Overflow用户
提问于 2018-08-05 06:11:16
回答 2查看 2.7K关注 0票数 1

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

代码语言:javascript
复制
<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() alert方法。现在弹出窗口工作正常,在ngAfterViewInit()中调用,但在控制台中遇到错误,如。

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

代码语言:javascript
复制
 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()函数:

代码语言:javascript
复制
displayModel() {
     this.alertMessage = 'You cannot enter more than one multiple at the same time ';
     this.successErrorModalBlock = this.modalService.open(this.sessionSuccessModalref);
   }

EN

回答 2

Stack Overflow用户

发布于 2018-08-06 04:23:58

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

代码语言:javascript
复制
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

票数 1
EN

Stack Overflow用户

发布于 2018-08-05 06:23:11

一般来说,在angular表达式中调用有副作用的函数不是一个好主意。Angular可以自由地调用这些函数,但是它经常希望确保结果是相同的。您应该在这些表达式中使用函数来返回结果,而不是引发操作。

我建议从你的控制器调用popupAlert,例如

代码语言:javascript
复制
$scope.$watch('commaSeparation', function(commaSeparation) {
        // The value of commaSeparation has just changed. Alert if it changed to true!
        if (commaSeparation) {
            popupAlert();
        }
    });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51689898

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档