Question

我有角度问题。我有一个功能模块，其路由配置如下所示：

const routes: Routes = [
{ 
    path: '', 
    children: [
        { path: '', component: CanvasComponent },
        { path: '', component: ControlsComponent, outlet: 'master' },
        { path: '', component: ToolbarComponent, outlet: 'detail-header' },
        { path: '', component: ConsoleComponent, outlet: 'detail-bottom' },
    ]
}];

出口在app.component.html中声明：

<!-- Navigation -->
<nav *ngIf="authService.loggedIn" id="navigation">
    <iq-navigation></iq-navigation>
</nav>

<!-- Master View -->
<div *ngIf="authService.loggedIn" id="master" [iqResizable]="['right']" [minSize]="250">
    <router-outlet name="master"></router-outlet>
</div>

<!-- Detail View -->
<div id="detail">

    <!-- Detail Header -->
    <div id="detail-header">
            <router-outlet name="detail-header"></router-outlet>  
    </div>

    <!-- Detail Main -->
    <div id="detail-main">
        <router-outlet></router-outlet>  
    </div>

    <!-- Detail Bottom -->
    <div *ngIf="authService.loggedIn" id="detail-bottom" [iqResizable]="['top']">
        <router-outlet name="detail-bottom"></router-outlet>
    </div>

</div>

功能模块的路径在 app-routing.module 中配置如下：

const routes: Routes = [
{ 
    path: '', 
    redirectTo: '/flow', 
    pathMatch: 'full' 
},
{ 
    path: 'flow', 
    canActivate: [AuthGuard], 
    loadChildren: 'app/flow/flow.module#FlowModule' 
},
{ 
    path: 'data', 
    canActivate: [AuthGuard], 
    loadChildren: 'app/data-manager/data-manager.module#DataManagerModule' },
{ 
    path: 'login', 
    loadChildren: 'app/login/login.module#LoginModule' 
},];

现在 Canvas组件和控件组件都注入了一个服务，但每个服务都有自己的实例。

我认为每个模块（特别是因为这个特征模块被延迟加载）都有自己的根注入器，而后者又作为子进程附加到根注入器。但似乎每个插座的每个根组件都有自己的根注入器（并且每个都提供了我的EditorService），因此不共享共同的祖先，因此每个插件都获得自己的服务实例。

这是故意的吗？在我的情况下，这搞砸了我的整个架构。

感谢您的建议。

修改这是延迟加载模块（flow.module）的定义

@NgModule({
imports: [ ReactiveFormsModule, SharedModule, FlowRoutingModule ],
exports: [], 
declarations: [
    CanvasComponent, 
    ControlsComponent, 
    ...
],
providers: [ 
    EditorService, 
    ....
]

}）

实例化两次的服务是 EditorService

对于app模块，没有什么花哨的，但为了完整起见：

@NgModule({
    imports: [ BrowserModule, AppRoutingModule, CoreModule, SharedModule, LoginModule ],
    exports: [],
    declarations: [ AppComponent ],
    providers: [],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

我的解决方案 好吧，我按照Günter的建议实现了FlowModule.forRoot()函数，它返回ModuleWithProvider配置为提供我的EditorService并且它有效。如果这个行为是有意的话我仍然很好奇，因为我最好只加载我的功能模块而不需要任何进一步的配置步骤。此外，我将不得不为每个其他功能模块和服务执行此操作，这些功能模块和服务将由不同的插座共享（例如，由于我选择的架构，主设备和详细信息插座中的组件）

Answer 1

我认为每个模块（特别是因为这个特征模块被延迟加载）都有自己的根注入器，而后者又作为子进程附加到根注入器。但似乎每个插座的每个根组件都附加到应用程序组件，因此不共享共同的祖先，因此每个插件都获得自己的服务实例。

很难理解你的意思。

如果在延迟加载的模块中提供服务，则此模块的组件将获得与来自其他模块或非延迟加载模块的延迟加载组件不同的实例。

实际上，非延迟加载模块中的组件只会在应用程序根作用域中注册提供程序时完全注入任何实例，而在其他延迟加载模块中，如果此延迟加载模块也具有提供者或应用程序根范围有提供者。

在aux路由之间没有共享Angular2服务实例？

1 个答案: