离子中的组件生命周期

Posted 2023-03-13

【中文标题】离子中的组件生命周期

【英文标题】：component lifecycle in ionic

【发布时间】：2018-01-07 19:18:21

【问题描述】：

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

export class AcknowledgementComponent implements AfterViewInit 

  private description: string;

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

  ngAfterViewInit() 
    console.log(this.period)
  

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

【问题讨论】：

你在哪里设置这个组件？你能添加那个html吗？

这是我在另一个模板中使用组件的方式。

而period 是父组件中的变量对吧？

@Duannx 这是一个自定义组件，不是离子页面。

您找到解决问题的方法了吗？

【参考方案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 设为大写。