快捷導(dǎo)航

Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問(wèn)題

更新時(shí)間：2019年08月27日 16:49:33 作者：wuyongqiu

這篇文章主要介紹了Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

假如我們有一個(gè)shareModule來(lái)存放公用的組件(Component)、指令(Directive)、管道(Pipe)、服務(wù)（Service），為避免各個(gè)子模塊引用shareModule時(shí)造成App中有多個(gè)一樣的單一實(shí)例服務(wù)的問(wèn)題。我們可以在shareModule中建立同意的App層級(jí)的服務(wù)。

ShareModule
import { NgModule, ModuleWithProviders } from '@angular/core';
@NgModule({
  imports: [
    HttpModule,
    JsonpModule,
    ...
  ],
  declarations: [
    ShowItDirective,
    ...
  ],
  exports: [
    ShowItDirective,
    ...
  ]
})
export class ShareModule{
  // 給shareModule添加forRoot
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: ShareModule,
      providers: [
        MessageService,
        NotifyService,
        ... any service
      ],
    };
  }
}
AppModule
@NgModule({
 declarations: [
  AppComponent,
 ],
 imports: [
  // 使用
  ShareModule.forRoot(),
 ],
 providers: [
  
 ],
 bootstrap: [AppComponent]
})
export class AppModule { }

這樣ShareModule中每一個(gè)service都只在app中注冊(cè)了一個(gè)實(shí)例，也避免了每次使用service都要provider的問(wèn)題。

ERROR NullInjectorError: StaticInjectorError(AppModule)[SurveyComponent -> PermissionCheckerService]:
NullInjectorError: No provider for PermissionCheckerService!

總結(jié)

以上所述是小編給大家介紹的Angular6使用forRoot() 注冊(cè)單一實(shí)例服務(wù)問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Angular2從搭建環(huán)境到開(kāi)發(fā)步驟詳解
本文的內(nèi)容主要是想幫助那些想學(xué)習(xí)Angular2的朋友們，因?yàn)槲易约涸谕鍭ngular2時(shí)碰到了不少坑，而且Angular2語(yǔ)法一直處于變化中，讓人很頭疼。不過(guò)也怪不了Anguar2，因?yàn)樗F(xiàn)在是處于并長(zhǎng)期處于alpha階段，下面就通過(guò)本文來(lái)學(xué)習(xí)Angular2的搭建環(huán)境和開(kāi)發(fā)吧。
2016-10-10
angularjs 處理多個(gè)異步請(qǐng)求方法匯總
這篇文章主要介紹了angularjs 處理多個(gè)異步請(qǐng)求方法匯總,需要的朋友可以參考下
2015-01-01
AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能實(shí)例詳解
這篇文章主要介紹了AngularJS通過(guò)ng-route實(shí)現(xiàn)基本的路由功能,結(jié)合實(shí)例形式詳細(xì)分析了AngularJS使用ng-route實(shí)現(xiàn)路由功能的操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-12-12
AngularJS實(shí)現(xiàn)Input格式化的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-11-11
Commands Queries設(shè)計(jì)模式提高Angular應(yīng)用性能及可維護(hù)性
在Angular應(yīng)用開(kāi)發(fā)領(lǐng)域,Commands and Queries 設(shè)計(jì)模式是一個(gè)關(guān)鍵的概念,它有助于有效地管理應(yīng)用程序的狀態(tài)和與后端的交互,本文將深入探討這一設(shè)計(jì)模式的核心要點(diǎn),并通過(guò)實(shí)際示例來(lái)加以說(shuō)明
2023-10-10
angular directive的簡(jiǎn)單使用總結(jié)
directive（指令）是angular的一個(gè)非常強(qiáng)大又有用的功能，它相當(dāng)于實(shí)現(xiàn)了組件化的概念，我們可以通過(guò)它公共地自定義DOM元素或CLASS類或ATTR屬性，并且在這基礎(chǔ)上進(jìn)行操作scope、綁定事件等等
2017-05-05
詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式
這篇文章主要介紹了詳解@angular/cli 改變默認(rèn)啟動(dòng)端口兩種方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
Angular5.1新功能分享
這篇文章主要介紹了Angular5.1新功能以及相關(guān)的用法，需要的朋友參考學(xué)習(xí)下吧。
2017-12-12
Angular4如何自定義首屏的加載動(dòng)畫(huà)詳解
Angular應(yīng)用程序在首次加載根組件時(shí)會(huì)在瀏覽器的顯示一個(gè)loading...動(dòng)畫(huà)，下面這篇文章主要給大家介紹了關(guān)于Angular4如何自定義首屏加載動(dòng)畫(huà)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來(lái)一起看看吧。
2017-07-07
Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目
這篇文章主要介紹了Angular4學(xué)習(xí)筆記之準(zhǔn)備和環(huán)境搭建項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08