加載ngModel後的生命週期鉤子

我有一個函數，我需要在我的組件中設置了this.value後運行。我嘗試使用生命週期鉤子ngAfterContentInit()，但this.value在此時爲空或爲空字符串。加載ngModel後的生命週期鉤子

我引用我的組件，如：

<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) { 
    ... 
    }

來源

2016-09-10 CodesLikeA_Mokey

您可以使用AfterViewChecked生命週期得到ngModel當其具有實際價值。如果你真的想使用生命週期鉤子。

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

但是......因爲它是一個ngModel事件，您應該使用ngModelChange。

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

來源

2016-09-10 15:38:54 jmachnik

我當然不是固定在生命週期鉤子上，我只是認爲這是我應該這樣做的方式。如果我使用它的生命週期事件，但我寧願儘可能做一些更高效的事情。我只需要在實際定義'this.value'之後運行一次fn。即使我傳遞了一個值，它仍然是未定義的，直到後來。生命週期鉤是唯一的方式來做我所需要的？ –

DId你檢查ngModelChange嗎？它應該在每次模型更改時運行。 – jmachnik

我試過了。加載初始值時不會觸發。 –

也許使用NgModel這樣會幫助你。在你的組件內部：

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

    /*...*/ 

    constructor(ngModel: NgModel) { 

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

來源

2016-10-21 08:53:54 Andrius

加載ngModel後的生命週期鉤子

回答

相關問題