Angular 角度2+;-在所有ngOnInit上自动运行相同的代码

Angular 角度2+;-在所有ngOnInit上自动运行相同的代码,angular,ngoninit,Angular,Ngoninit,也许这个问题的答案也与AngularJS(1.x)有关,但我这里的问题是Angular2及以上 正如我们所知,每个组件文件都有自己的ngOnInit函数,当组件初始化时,该函数运行其中的代码。 在我当前的应用程序中,我需要在所有这些函数、所有组件中自动运行同一段代码。 现在,我只是在这些函数之间为每个组件的TS文件复制代码。 有没有一种方法可以将这段代码放在一个公共位置,并让所有这些init函数从那里自动运行它?这意味着,即使是添加到应用程序中的全新组件也将运行此代码,作为其init函数的一部分

也许这个问题的答案也与AngularJS(1.x)有关,但我这里的问题是Angular2及以上

正如我们所知,每个组件文件都有自己的ngOnInit函数,当组件初始化时,该函数运行其中的代码。 在我当前的应用程序中,我需要在所有这些函数、所有组件中自动运行同一段代码。 现在,我只是在这些函数之间为每个组件的TS文件复制代码。
有没有一种方法可以将这段代码放在一个公共位置,并让所有这些init函数从那里自动运行它?这意味着,即使是添加到应用程序中的全新组件也将运行此代码,作为其init函数的一部分…

组件是类,因此可以扩展(抽象)基类,示例代码:

基类:

export abstract class AppBaseComponent implements OnInit {
constructor() { }
  ngOnInit() {
    // Your base code here
  }

}
扩展类

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent extends AppBaseComponent implements OnInit {
  constructor() {
    super();
  }
  // Your component specific code here
}

除了扩展基类(如Jens的回答中所述),您还可以使用面向方面的编程方法并使用typescript定义自己的装饰器。查看此教程:@JensHabegger-首先,感谢您提供此信息!!关于你的回答,我有两个问题:1。在本例中,当AppComponent运行时,存在于基本组件的ngOnInit函数下的代码也将自动运行?2.如果要将AppComponent扩展到多个其他组件,会发生什么情况?在这个例子中,假设我需要从基础组件和应用程序中的其他组件运行代码…@TheCuBeMan Typescript(目前)不支持多重继承,但您可以检查Phil建议的模式(面向方面编程)或使用Typescript Mixins()。