角度轨道对象属性更改

Question

我正在从 api 服务中检索对象值并显示在 html 元素中以允许用于对 page 属性进行任何更改 这将是双向数据绑定，所以我想检查page 属性中是否检测到任何更改。这是一个场景。

这是我的组件：

  export class TestComponent implements OnInit{

  page:any = {};
  changesSaved:boolean = false;

  constructor(
    private route:ActivatedRoute
  ) { 
      this.route.params.subscribe(params=>{
        this.currentParam = params.id;
        params.id? this.onGetPageSettings(params.id): false;
      })
  }

  ngOnInit() {

  }

  onGetPageSettings(id){
    this.configureService.getPageSettings(id)
      .subscribe((response:any)=>{
        let pageConfig = response.data;
        this.page.attrib1 =  pageConfig.page_id;
        this.page.attrib2 =  pageConfig.page_name;
        this.page.attrib3 =  pageConfig.page_desc;
      },error=>{
        console.log(error)
      })
  }

}

这是一个html代码，我正在使用ui开关进行选项更改

<form role="form">
    <div class="form-body">
        <div class="form-group form-md-line-input">
            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'AUTO_LIKE_COMMENT' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.page_like_comment" name="page_like_comment" [(ngModel)]="page.page_like_comment"></ui-switch>
            </div>
        </div>

        <div class="form-group form-md-line-input">

            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'AUTO_REPLY_COMMENT_WITH_COMMENT' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.page_reply_comment" name="page_reply_comment" [(ngModel)]="page.page_reply_comment"></ui-switch>
            </div>
        </div>

        <div class="form-group form-md-line-input">

            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'AUTO_REPLY_COMMENT_WITH_PRIVATE_MESSAGE' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.page_reply_comment_with_message" name="page_reply_comment_with_message" [(ngModel)]="page.page_reply_comment_with_message"></ui-switch>
            </div>
        </div>


        <div class="form-group form-md-line-input">

            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'AUTO_INBOX_MESSAGING' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.page_reply_message" name="page_reply_message" [(ngModel)]="page.page_reply_message"></ui-switch>
            </div>
        </div>
        <div class="form-group form-md-line-input">

            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'SELF_LEARNING_AI' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.include_comment_text_in_message" name="include_comment_text_in_message" [(ngModel)]="page.include_comment_text_in_message"></ui-switch>
            </div>
        </div>
        <div class="form-group form-md-line-input">
            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'IGNORE_TAG_FRIEND_COMMENT' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.ignore_tag_comment" name="ignore_tag_comment" [(ngModel)]="page.ignore_tag_comment"></ui-switch>
            </div>
        </div>


        <div class="form-group form-md-line-input">

            <label class="col-lg-7 col-md-7 col-sm-7 col-xs-7 control-label">{{ 'IGNORE_STICKER_COMMENT' | translate }}</label>
            <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                <ui-switch [checked]="page.ignore_sticker_comment" name="ignore_sticker_comment" [(ngModel)]="page.ignore_sticker_comment"></ui-switch>
            </div>
        </div>

    </div>

</form>

我知道 ngModelChange 会完成这项工作，但我想要一种通用的方式，这样我就不必对每个输入元素都应用。

就像下面的 html 代码一样，我也使用自定义指令来允许用户在数组中输入信息，然后将此信息附加到 page 属性中。

<div token-field name="comment" [value]="page.page_default_comment" (tokenAdded)="addDefaultComment($event)" heading="Add Comment" addButtonLabel="Add Comment"></div>

Answer 1

理想的方法是将以前的值存储在 var 中并使用 NgModel 进行比较。

但是当您要求检测变化的通用方法时，

您可以在组件中使用 OnChange 事件。

https://angular.io/api/core/OnChanges

在ngOnChanges 方法中，如果字段的值发生变化，您可以通过将初始值存储在其他变量中并在ngOnChanges() 中进行比较来编写规则

此外，您也可以检查一下。

https://angular.io/api/core/ChangeDetectorRef