所有页面通用的 Angular ngOnInit

Posted 2023-03-13

【中文标题】所有页面通用的 Angular ngOnInit

【英文标题】：Angular ngOnInit common for all pages

【发布时间】：2018-06-14 06:15:05

【问题描述】：

有没有办法设置通用 ngOnInit() 在 Angular 应用程序的每个页面上执行？ 而不是在每一页都写：

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

constructor(
    private app: AppComponent) 

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

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

【问题讨论】：

如果你只是在谈论路由组件，你可以使用路由事件angular.io/guide/router#router-events你也可以创建一个父组件，你可以在所有其他组件中继承

这就是我要找的，谢谢

【参考方案1】：

虽然可能有一种很老套的方法来做到这一点，但它是糟糕的设计。所以我会说答案是否，至少在某种程度上这不是很好的做法。

如果所有组件都在全局范围内执行某项操作，那么它就像一个神奇的函数，被突然调用。遇到你的代码库的每个人都必须知道这个事实，否则奇怪的事情就会开始发生。另外，当你想要一个不有这种行为的组件时会发生什么？迟早会发生的。

您已经将行为封装在一个可注入类中的函数中，这使得它可以跨不同组件重用。这已经足够了。每次需要时自行调用。

不过，我真的无法想象需要这样做的情况。一个简单的 UI 按钮组件与将整个页面组合在一起的 AppComponent 有什么共同点？退后一步，想想你要解决的问题。每次初始化组件时自动调用函数是一个糟糕的解决方案。这就是为什么这是不可能的。

【讨论】：

有很多理由这样做，统计相关，例如测试等。

另一个原因可能是：显示和隐藏预加载器微调器

这仍然不会影响每个组件。也许每个组件都有一个列表，或者每个组件都代表一个路由。

【参考方案2】：

感谢 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();
    
 );

【讨论】：

不过，这不是问题的答案。这基本上就是我在my answer 中所说的：“退后一步，想想你要解决的问题。”

请编辑您的答案（只是正式地），以便我可以撤消否决