在子模塊中看不到的角度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