Question

我有一个功能，我需要在我的组件中设置this.value后运行。我尝试使用生命周期钩子ngAfterContentInit()，但this.value在此时为空或字符串。

我正在引用我的组件，如：

<add-select name="address" [options]="knownAddresses" [(ngModel)]="user.address"></add-select>

我的组件看起来像

const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => AddSelect),
    multi: true
};

@Component({
  selector: 'add-select',
  templateUrl: 'build/components/add-select/add-select.html',
  providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class AddSelect implements ControlValueAccessor {
  @Input() options: any[];

  // * NEED THIS TO RUN AFTER this.value IS CURRENT WHICH IS PASSED IN VIA ngModel
  private syncModelAndOptions() {
        if (this.options && this.value) {
            const modelOption = _.find(this.options, option => {
                return item == this.value || (option._id && this.value._id && option._id === this.value._id);
            });

            if (modelOption) {
                this.value = modelOption;
            } else {
                this.options.push(this.value);
            }
        }
    }

  //get accessor
  get value(): any {
    ...
  };

  //set accessor including call the onchange callback
  set value(v: any) {
    ...
  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    ...
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    ...
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    ...
  }

Answer 1

您可以使用AfterViewChecked生命周期来获取具有实际值的ngModel。如果你真的想使用生命周期钩子。

https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview

但是......你应该使用ngModelChange，因为它是一个ngModel事件。

https://angular.io/docs/ts/latest/guide/forms.html（搜索ngModelChange）

Answer 2

也许以这种方式使用NgModel可以帮到你。在您的组件内：

  import { NgModel } from '@angular/forms';

    /*...*/

  constructor(ngModel: NgModel) {

    ngModel.valueChanges.subscribe(() => {
      console.log('ngModel set')
    });
  }

Answer 3

您实现 ControlValueAccessor 接口的原因是您的组件可以很好地与 Angular 表单（模板驱动和反应式）配合使用。

在模板驱动的表单中（基本上是当您使用 ngModel 时），对 ngModel 的更新最终会触发对 ControlValueAccessor.writeValue 的调用，它应该知道如何更新底层表单控件。

因此，一旦框架（即 this.value）设置了 ngModel，就运行某些东西的可靠方法是从 writeValue 中调用它。

加载ngModel后的生命周期钩子

3 个答案: