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的子级。我正在使用以下网址下的路由器访问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中，它是UserModule的父级，它是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的情况并非如此。

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

@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组件

1 个答案: