各位好,
最近在把舊專案(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 是不相同
解法有以下方式
- 將 tabService 註冊在 Root 層,因為使用 Angular 8.
@injectable
提供這種寫法
@Injectable({
providedIn: 'root'
})
export class service{}
當 service 這樣子寫後,就不需要再 NgModule
的 provider
內註冊了
- 使用 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]
};
}
}