Angular

Question

如果我在每个组件中都有

ngOnInit() {
  console.log('hello world');
}

如何避免在每个组件中编写该代码？我可以编写一些通用代码来为每个组件（可能在它们的模块中）触发 onInit 吗？或者在他们都使用的共享服务中，例如？

我对 NavigationStart 和 NavigationEnd 有同样的问题。

感谢

Answer 1

我建议您使用静态方法创建一个实用程序 class。

假设您想在每次初始化组件时打印 hello world：

utility.ts:

class Utility {
    static printHelloWorld() {
        console.log("Hello world");
    }
}

在component.ts中：

首先，将实用程序 class 导入为：

import Utility from './path/to/utility/class';

然后，在ngOnInit方法中：

ngOnInit() {
   Utility.printHelloWorld();
}

Answer 2

最简单的方法是从基本组件扩展：

@Component({
    selector: 'base-component',
    template: '',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class BaseComponent implements OnInit {

 ngOnInit (): void {
  console.log('hello world');
 }
}

并在您的子组件中使用 extends BaseComponent，例如：

@Component({
    selector: 'child-component',
    template: '',
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent extends BaseComponent {
  // your logic
}

另一种方式：为每个组件使用本地提供商的服务：

@Injectable()
export class ActionService {
 constructor(){
   console.log('hello world');
 }
}

并将其注入 (providers: [ActionService]) 到必须具有此逻辑的组件中，每个组件将有一个单独的此服务实例：

@Component({
    selector: 'main-page',
    templateUrl: './main-page.component.html',
    styleUrls: ['./main-page.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [ActionService]
})
export class MainPageComponent {}

对我来说：第一个解决方案比每次都提供服务要好得多，但这取决于你:)

Angular - 常见的 ngOnInit

Angular - Common ngOnInit

boilerplate

ngoninit