Fork Me On Github

angular 12 singleton service

angular 12 中单例 Service 的使用

service 写法

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root',
})
export class SearchService {

}

providedIn: 'root' 表明当前 service 为全局有效的单例模式

注册 service

必须在 AppModule 注册,或者 在任意一个 module 中注册。

但是需要注意,这个 module 只能导入一次,

例如:有一个 module ThemeModule 为公共核心组件,很多其他 module 都会依赖她,

导致很多地方都使用了

imports: [
    ...,
    ThemeModule,
    ...
]

进行导入

而 单例 service SearchService 是注册在 ThemeModule 中的,

这样就会导致单例不生效,每一个 SearchService 都不同,

这是可以给 ThemeModule 增加一个方法 forRoot()

export class ThemeModule {
    static forRoot(): ModuleWithProviders<ThemeModule> {
        return {
            ngModule: ThemeModule,
            providers: [
                SearchService,
            ]
        };
    }
}

SearchService 仅注册到 forRoot() 中。

然后在 AppModule 中导入 ThemeModule

@NgModule({
    ...
    imports: [
        ...,
        ThemeModule.forRoot(),
        ...
    ],
    ...
})
export class AppModule 

这样就能生效

点击查看全文
标签: angular
0 33 0
angular 12使用 KaTex 显示 AsciiMath 格式的公式
ng-deep 使用
angular 12 动态生成组件
angular 12 动画执行完成事件
angular 全局搜索触发子模块的搜索