ngOnInit 比 @Input 快

Posted 2023-03-13

【中文标题】ngOnInit 比 @Input 快

【英文标题】：ngOnInit is faster than @Input

【发布时间】：2019-11-27 08:17:00

【问题描述】：

我有一种情况，我正在使用 @Input 将值从父组件传递到子组件。问题是在子组件中触发 ngOnInit() 之前我没有从父亲那里得到值。所以发生的情况是，当 ngOnInit() 尝试使用其“未定义”值执行 sg 时，一秒钟后该值已填充但 ngOnInit() 已经完成。我希望它足够清楚。

有什么方法可以使这两者同步，首先我获取数据而不是填充元素？

         @Input('data')
      set data(value) 
        this._data = value;
         this.noActivityData = (this._data === null || this._data === undefined);
      

ngOnInit() 

     if(this._data)
       elements.activeTimeDistribution.selected = !this.noActivityData;
       elements.stepsDay.selected = !this.noActivityData;
       elements.walkingSpeed.selected = !this.noActivityData;
       elements.activeTimeDistribution.disabled = this.noActivityData;
       elements.stepsDay.disabled = this.noActivityData;
       elements.walkingSpeed.disabled = this.noActivityData;

     

    );
  

【问题讨论】：

你能不能试着把你的 @Input() 放在构造函数中，因为它是在 ngOnInit() 之类的任何东西之前“加载”的

为什么不调用 set data 中的函数“init”而忘记 ngOnInit()？

【参考方案1】：

一种选择是将 *ngIf 添加到您的子组件中，并且仅在父组件获得您想要传递的值时才呈现它

<app-child-component
*ngIf="variable_you_want_to_pass_through">
</app-child-component>

您也可以使用 ngOnChanges，并在此处的 ngOnInit 方法中运行您想要运行的任何内容，因为如果父值更改，这将触发。

https://angular.io/api/core/OnChanges