延遲子路由與subject的問題

各位好,
最近在把舊專案(angular7)轉成angular8的版本,
發現一個問題。

我需要一個公用模組,專門接收資料並印出接收值
其他的功能模組都負責送資料出去

-src
  |-app
    |-cms資料夾  (所有功能區)
        |-one資料夾 (功能模組、延遲子路由)
        |-two資料夾  (功能模組、一般子路由)
    |-tab資料夾  (公用模組)
    |-app-routing.module.ts
    |-app.component.css
    |-app.component.html
    |-app.component.ts
    |-app.module.ts

範例位置:https://stackblitz.com/edit/angular-zdvzqn?file=src%2Fapp%2Ftab%2Ftab.service.ts

發現的問題是 one.component在subject.next, 在tab.component上都收不到
而two.component的subject.next,在tab.component上都收得到。

想知道為何使用延遲子路由的情境下會出現這個情形,
以及如何改善?

感謝!

Angular lazy module provider 的註冊階層與非 lazy loading module 是不同的,對於 TabComponent 來說, tabService 與 lazyloading module 是不相同

解法有以下方式

  1. 將 tabService 註冊在 Root 層,因為使用 Angular 8. @injectable 提供這種寫法
@Injectable({
providedIn: 'root'
})
export class service{}

當 service 這樣子寫後,就不需要再 NgModuleprovider 內註冊了

  1. 使用 forRoot() 註冊在 RootModule,效果等同於方法 1
import { NgModule, ModuleWithProviders } from "@angular/core";
import { TabComponent } from "./tab.component";
import { TabService } from "./tab.service";

@NgModule({
  declarations: [TabComponent],
  exports: [TabComponent]
})
export class TabModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: TabModule,
      providers: [TabService]
    };
  }
}

原來是註冊階層的問題…,感謝解答!!