Angular ngOnInit适用于所有页面

时间:2018-01-04 13:39:27

标签: angular angular2-routing ngoninit

有没有办法在Angular应用程序的每一页上设置公共ngOnInit()? 而不是写在每一页:

import { AppComponent } from '../app.component';

constructor(
    private app: AppComponent) {}

ngOnInit(): void {
    this.app.doCommonStuffForEachPage();
}

我想简单地编写一次这段代码,当路由器打开每一页时,会调用this.app.doCommonStuffForEachPage()。

2 个答案:

答案 0 :(得分:0)

虽然这可能是一种破坏性的方法,但糟糕的设计。所以我会说答案是,至少不是一种好的做法。

如果所有组件都在全局范围内执行某些操作,那么它就像是一个无处不在的魔术函数。遇到代码库的每个人都必须知道这个事实,否则奇怪的事情就会开始发生。另外,如果您希望的组件具有此行为,会发生什么?它迟早会发生。

您已经将行为封装在可注入类的函数中,这使得它可以在不同的组件中重用。那太好了。每次需要时都可以自己调用它。

但我无法想象会出现这种情况的情况。简单的UI按钮组件与将整个页面保持在一起的AppComponent有什么共同之处?退一步思考你想要解决的问题。每次初始化组件时自动调用函数都是一个糟糕的解决方案。这就是为什么不可能的原因。

答案 1 :(得分:0)

感谢Shadowlauch,我提出了这个解决方案:

import { AppComponent } from '../app.component';
import { Router, NavigationEnd } from '@angular/router';

constructor(
    private app: AppComponent,
    private router: Router) {

 router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.app.doCommonStuffForEachPage();
    }
 });
}