在子模块中看不到的角度4组件

Question

我想要在AppModule的所有子模块中看到以下组件。为什么当它被导入到AppModule模块中时，我无法获取loader01组件，而没有在子模块中导入它。这是我的组件。

//app\utilities\loader01\loader01.component.ts 

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'Loader01', 
    templateUrl: './loader01.component.html', 
    styleUrls: ['./loader01.component.css'] 
}) 
export class Loader01Component implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

该组件是我已经导入到Root AppModule的共享模块的一部分;

//app\utilities\utilities.module.ts 
@NgModule({ 
    imports: [ 
    CommonModule 
    ], 
    declarations: [Loader01Component], 
    exports: [ 
    Loader01Component 
    ] 
}) 
export class UtilitiesModule { } 

我的AppModule看起来像这样;

//app\app.module.ts 
@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    AppRoutingModule, 
    AppConfigModule, 
    ReactiveFormsModule, 
    BrowserAnimationsModule, 
    ToasterModule, 
    HttpInterceptorModule, 
    NgbModule.forRoot(), 
    UtilitiesModule 
    ], 
    exports: [ToasterModule], 
    providers: [ 
    Title, 
    AuthGuard, 
    AuthenticationService, 
    UserService, 
    SweetAlertService, 
    InterfaceService, 
    PermissionService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

显然，UtilitiesModule包含在AppModule中，所以我期望它可以在所有的子模块中使用。但这种情况并非如此。

我有一个子模块UsersModule，它是LayoutModule的子模块，它是AppModule的子模块和PermissionModule模块，它是UsersModule的子模块。我正在使用下面的URL下的路由器访问UsersModule和PermissionModule。

#/users 
#/users/permissions 

我想看到Loader01Component的PermissionModule看起来像这样;

//app\utilities\loader01\loader01.component.ts 
@NgModule({ 
    imports: [ 
    CommonModule, 
    PermissionsRoutingModule, 
    NgbModalModule, 
    NgbPaginationModule 
    ], 
    declarations: [PermissionsComponent, EditComponent, CreateComponent] 
}) 
export class PermissionsModule { } 

Loader01Component在此模块中未看到。该组件是PermissionModule的一部分。在这个模块中看到它的唯一方法是导入PermissionModule中的UtilitiesModule。但我不认为这是正确的，因为UtilitiesModule已经包含在AppModule中，它是PermissionModule的父节点的UsersModule的父节点。我认为Angular路由与我还没有学到的东西有关。

我正在使用路由来访问我所有的子模块。这里是

//app\app-routing.module.ts 
import { AuthGuard } from './_guards/auth.guard'; 

const appRoutes: Routes = [ 
    {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]}, 
    { path: 'login', loadChildren: './login/login.module#LoginModule'}, 
    //{ path: '**', component: PageNotFoundComponent } 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(
      appRoutes, 
      { enableTracing: true, useHash: true } // <-- debugging purposes only 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

我的LayoutModule也做同样的事情，包括它的子模块。这是我的LayoutModule路由;

//app\layout\layout-routing.module.ts 
const routes: Routes = [{ path: '', component: LayoutComponent, children: [ 
    //{ path: '', redirectTo: 'users', pathMatch: 'full' }, 
    { path: '', loadChildren: '../dashboard/dashboard.module#DashboardModule' }, 
    { path: 'users', loadChildren: '../users/users.module#UsersModule' } 
]}]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule] 
}) 
export class LayoutRoutingModule { } 

这是我的父AppModule的路由，其中​​包含UtilitiesModule;

//app\app-routing.module.ts 

import { AuthGuard } from './_guards/auth.guard'; 

const appRoutes: Routes = [ 
    {path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard]}, 
    { path: 'login', loadChildren: './login/login.module#LoginModule'}, 
    //{ path: '**', component: PageNotFoundComponent } 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forRoot(
      appRoutes, 
      { enableTracing: true, useHash: true } // <-- debugging purposes only 
     ) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 
export class AppRoutingModule {} 

Answer 1

Providers的工作，你所希望的方式，但是这不符合Component S上的情况。

既然你有一个UtilitiesModule声明您Loader01Component并将其导出，你必须要在其中使用Loader01Component

@NgModule({ 
    imports: [UtilitiesModule] 
}) 
export class UserModule 

一个重要的提示每一个模块中导入UtilitiesModule：不提供任何服务从您的UtilitiesModule，因为角依赖注入。延迟加载的模块获取自己的服务实例。 你可以在这里阅读更多：https://angular.io/guide/ngmodule-faq#why-is-it-bad-if-sharedmodule-provides-a-service-to-a-lazy-loaded-module