angular - ionic 中的组件生命周期

Question

我已经构建了一个组件如下

export class AcknowledgementComponent implements AfterViewInit {

  private description: string;

  @Input('period') period: string;
  constructor() {
  }

  ngAfterViewInit() {
    console.log(this.period)
  }

在模板中使用它之前，我必须对该变量执行一些逻辑。但在 ngOnInit 和 ngAfterViewInit 中，该变量是未定义的。有人可以建议使用哪个钩子(Hook)来获取变量吗？

Answer 1

您可以通过两种方式拦截输入属性:

Using a setter:

export class AcknowledgementComponent {
    private _period = "";

    @Input('period')
    set period(period:string) {
        this._period = (period && period.toUpperCase()) || 'No input';
    }
    // Works with async operations. Emample:
    // set period(period:string) {
    //     setTimeout(() => {
    //         this._period = (period && period.toUpperCase()) || 'No input';
    //     }, 5000);
    // }

    get period():string { return this._period; }
}

Using ngOnChanges:

import { Component, Input, SimpleChanges } from '@angular/core';
...
export class AcknowledgementComponent {
    @Input() period;

    ngOnChanges(changes: {[ propKey: string ]: SimpleChanges}){
        this.period = '';

        for(let propName in changes) {
            let changedProp = changes[propName];
            let newValue:string = String(changedProp.currentValue);
            this.period = newValue.toUpperCase();

            // Works with async operations. Emample:
            // setTimeout(() => {
            //     this.period = (newValue && newValue.toUpperCase()) || 'No input';
            // }, 5000);
        }
    }
}

这些示例只是将输入的 string 变为大写。