IONIC中的组件生命周期

Question

我构建了一个组件，如下所示

export class AcknowledgementComponent implements AfterViewInit {
private description: string;
@Input('period') period: string;
constructor() {
}
ngAfterViewInit() {
console.log(this.period)
}

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

Answer 1

可以通过两种方式截获输入属性：

使用二传手：

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; }
}

使用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大写。