如何在 Angular 4 中使用变更检测答案

【问题标题】：How to use Change Detection in Angular 4如何在 Angular 4 中使用变更检测
【发布时间】：2017-11-24 20:49:42
【问题描述】：

当我的组件发生更改时，我想触发必填字段验证。此组件上有多个必填字段，用户需要填写这些字段才能进入下一页。我的想法是启动我的函数，该函数检查必填字段是否为空或为空。

我的问题是我找不到任何关于如何实现它的示例。以下是我到目前为止所得到的。

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


    }




}

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

【问题讨论】：

ngDoCheck 会在 Angular 对你的组件执行更改检测时触发，当 @Input 更改时会触发 onChanges，但没有别的

标签： angular angular2-forms

【解决方案1】：

我会说为什么不使用响应式形式而不是更改检测。它很容易实现。

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

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

注意：- 为什么要在组件中定义服务。是共享服务还是组件级别。

 providers: [carReqFormService]

如果它的共享组件比您需要在模块级别定义。否则它将创建单独的实例

【讨论】：