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

Question

我使用 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 次！谢谢。

Answer 1

我遇到过类似的问题。不要在 PaperEditForm1 类中继承 Paper 类，只需将函数 loadData 静态。在子 PaperEditForm1 类中导入 Paper 类。现在，只需调用使用 Paper.loadData() 的 loadData 静态函数。这可以最大限度地减少构造函数调用并删除继承。它仅在需要时调用。这解决了我的情况。