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() {
  }

}

此组件是我导入到 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 的子模块，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 以您想要的方式工作，但是 Components 并非如此。

由于您有一个 UtilitiesModule 声明您的 Loader01Component 并将其导出，因此您必须在每个要使用 Loader01Component 的模块中导入 UtilitiesModule

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

一个重要提示：由于 Angular 依赖注入，请勿从您的 UtilitiesModule 提供任何服务。延迟加载的模块有自己的服务实例。您可以在此处阅读更多内容：https://angular.io/guide/ngmodule-faq#why-is-it-bad-if-sharedmodule-provides-a-service-to-a-lazy-loaded-module

Angular 4 个组件未出现在子模块中

Angular 4 component not seen in child modules

javascript

angular-routing

angular