javascript - 在子模块中看不到 Angular 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() {
  }

}

此组件是我已导入到根应用程序模块中的共享模块的一部分；

//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 的子模块，而 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 中，AppModule 是 UsersModule 的父级，UsersModule 是 PermissionModule 的父级。我认为 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并导出它，你必须导入 UtilitiesModule在您想要使用 Loader01Component 的每个模块中

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

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