时间戳

首页 > 解决方案 > ngOnInit 在 Angular 5 的所有继承类中多次调用

angular - ngOnInit 在 Angular 5 的所有继承类中多次调用

问题描述

我使用 import {Ng2StateDeclaration} from '@uirouter/angular'; 我现在在 Angular 5 中遇到了一个问题，我有没有模板的 Paper 类：

export class Paper implements OnInit {
  ngOnInit(): void {
     // async function here
     this.loadData();
   }

}

现在我有另一个名为 PaperEdit 的类：

export class PaperEdit extends Paper{
  constructor(){super();}
}

在 PaperEdit 类中，我有很多带有长 html 的部分：paper-edit.html

<paper-edit-form-1></paper-edit-form-1>
<paper-edit-form-2></paper-edit-form-2>
<paper-edit-form-3></paper-edit-form-3>

PaperEditForm1,2,3 是一个只有 html 文件的类，没有逻辑，我想继承 Paper 类的所有变量和函数，如 PaperEdit

export class PaperEditForm1 extends Paper {
  constructor(){super();}
  // no function here`

}

结果是： Paper 类的 ngOnInit 运行了 4 次，这意味着 this.loadData() 也运行了 4 次。因此，任何防止此问题的方法，我希望该生命周期只运行 1 次！谢谢。

标签： angularclassinheritanceduplicates

解决方案

我遇到过类似的问题。不要在 PaperEditForm1 类中继承 Paper 类，只需将函数loadData 设为静态。在子 PaperEditForm1 类中导入 Paper 类。现在，只需使用Paper.loadData()调用 loadData 静态函数.这最小化了构造函数调用并删除了继承。它仅在需要时进行调用。这解决了我的情况。

推荐阅读