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

角度跟踪对象属性更改

1 个答案: