如何在角度4中使用更改检测

问题描述：

我希望在组件发生更改时触发必需字段验证。该组件上有多个必填字段，需要填写以便用户进入下一页。我的想法是激发我的函数，该函数检查必填字段是否有空或空。如何在角度4中使用更改检测

我的问题是，我无法找到任何关于如何实现这个的例子。以下是我迄今得到的。

import { Component, Injectable, OnInit, Input, ChangeDetectorRef } from '@angular/core' 
import { HttpModule } from '@angular/http'; 
import { CarReqFormService } from './carReqForm.service'; 
import { DropDownListItem } from './carReq-dropdownItem'; 
import { IMyOptions, IMyDateModel } from 'ngx-mydatepicker'; 
import { surgeryReservationModel } from './carReservationModel'; 
import { Router, ActivatedRoute, Params } from '@angular/router'; 
import { Location } from '@angular/common'; 
import 'rxjs/add/operator/switchMap'; 
import { AutoCompleteBoxRequest } from './autoCompleteBoxRequest'; 

@Component({ 
    moduleId: module.id, 
    selector: 'uh-carReservationFormPage3', 
    templateUrl: './carReservationFormPage3.html', 
    providers: [carReqFormService] 
}) 



export class carReservationFormPage3Component implements OnInit { 

    SurgicalPositionItems: DropDownListItem[]; 
    private loading: boolean = true; 
    carReservationModel = new carReservationModel(); 
    public isBusy: boolean; 


    constructor(private _carRequestFormService: carReqFormService, 
       private route: ActivatedRoute , 
       private _router: Router, 
       private ref: ChangeDetectorRef) { 

    } 
    ngOnInit(): void { 
     this.getActivecaricalPositions(); 
     this.isBusy = true; 
     var test; 
     this.route.params 
      .switchMap((params: Params) => this._carRequestFormService.getcarRequestById(+params['id'])) 
      .subscribe(
      data => { 
       this.carReservationModel = data; 
       this.isBusy = false; 


      }, 
      error => { 
       console.log("Error", error); 
       this.isBusy = false; 
      }, 
      () => { 
       console.log("Inside NgOnInit on Page 3" + this.carReservationModel.carRequestId); 
       this.isBusy = false; 
      }); 


    } 




}

是否有一个函数会触发任何更改，我可以调用我的函数来触发验证规则？

只要Angular为组件执行变更检测，就会触发ngDoCheck，@Input变更时会触发onChanges，但没有其他 –

答

我会说为什么不使用反应式而不是变化检测。它非常容易实现。

您可以使用Validators轻松实现验证部分，如果验证失败，您可以隐藏下一个按钮。

更多信息检查此链接 https://angular.io/guide/reactive-forms

注： - 为什么在你的组件定义服务。它是共享服务还是组件级别？

providers: [carReqFormService]

如果它的共享组件比你需要在模块级定义。其他方面，它会创建sperate实例

如何在角度4中使用更改检测

相关推荐