Angular 7. 如何导入这个共享模块？

Question

我有一个名为 RequestModule 的模块。我正在尝试在另一个名为 HomeComponent

的组件中使用其中一个组件 RequestComponent 及其 Services

我想我可以像这样使用选择器在我的 home.component.html 中使用 Request component

Home.Component.Html ... <request></request> ... 但是我错了。我收到此错误。

: 'request' is not a known element: 1. If 'request' is an Angular component, then verify that it is part of this module.

如何在我的主页组件中使用此模块？

这是我的 RequestModule

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatCardModule, MatSidenavModule, MatGridListModule, MatIconModule, MatInputModule, MatTooltipModule, MatSelectModule, MatListModule, MatButtonModule, MatTabsModule, MatSnackBar, MatSnackBarModule } from '@angular/material';
import { RequestComponent } from './request.component';
import { RequestDetailsComponent } from './request-details.component';
import { RequestRoutingModule } from './request.routing';
import { DynamicFormComponent } from '../questionnaire/dynamic-form.component';
import { DynamicFormGroupComponent } from '../questionnaire/dynamic-form-group.component';
import { DynamicFormQuestionComponent } from '../questionnaire/dynamic-form-question.component';
import { CheckoutComponent } from './checkout.component';
import { SharedModule } from '../shared/shared.module';
import { ProductDetailsComponent } from './product-details.component';
import { CarouselComponent } from '../components/carousel/carousel.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { OwlDateTimeModule } from 'ng-pick-datetime';
import { OwlNativeDateTimeModule } from 'ng-pick-datetime';
import { OWL_DATE_TIME_LOCALE } from 'ng-pick-datetime';
import { OWL_DATE_TIME_FORMATS } from 'ng-pick-datetime';
import { RequestService } from './request.service';

@NgModule({
  imports: [
    SharedModule,
    RequestRoutingModule,
    ReactiveFormsModule,
    MatCardModule,
    MatSidenavModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatTooltipModule,
    MatSelectModule,
    MatListModule,
    NgbModule,
    MatButtonModule,
    MatTabsModule,
    MatSnackBarModule,
    OwlDateTimeModule,
    OwlNativeDateTimeModule
  ],
  declarations: [
    RequestComponent,
    RequestDetailsComponent,
    DynamicFormComponent,
    DynamicFormGroupComponent,
    DynamicFormQuestionComponent,
    CheckoutComponent,
    ProductDetailsComponent,
    CarouselComponent
  ],
  providers: [
      {provide: OWL_DATE_TIME_LOCALE, useValue: 'en-US'},
      RequestService
  ]
})
export class RequestModule { }

HomeComopnent 在 template-routing.module.ts

中声明

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
...
import { HomeComponent } from '../components/home/home.component';
...

const routes: Routes = [
  { path: '', component: TemplateComponent, children: [
    { path: '', pathMatch: 'full', redirectTo: 'home' },
    { path: 'home', component: HomeComponent},
     ...
    { path: 'request', canActivate: [AuthGuard], loadChildren: 'app/request/request.module#RequestModule' }
  ] }
];

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

这个模块看起来已经包含了 RequestModule 的路径。

Template-routing.module用于我的template.module.ts

import { NgModule } from '@angular/core';
import { TemplateComponent } from './template.component';
import { TemplateRoutingModule } from './template-routing.module';
import { RegionService } from '../region/region.service';
import { TeamModule } from '../team/team.module';
import { WorkModule } from '../work/work.module';
import { GraphicsModule } from '../graphics/graphics.module';
import { DashboardModule } from '../dashboard/dashboard.module';
import { SharedModule } from '../shared/shared.module';
import { LoginModule } from '../login/login.module';
import { MatInputModule, MatToolbarModule, MatIconModule, MatTooltipModule, MatButtonModule, MatSidenavModule } from '@angular/material';
import { HomeComponent } from '../components/home/home.component';
import { TemplateMenuComponent } from './template-menu/template-menu.component';
import { TemplateMenuItemComponent } from './template-menu-item/template-menu-item.component';

@NgModule({
  imports: [
    SharedModule,
    TemplateRoutingModule,
    TeamModule,
    WorkModule,
    GraphicsModule,
    DashboardModule,
    LoginModule,
    MatInputModule,
    MatToolbarModule,
    MatIconModule,
    MatTooltipModule,
    MatButtonModule
  ],
  declarations: [ TemplateComponent, HomeComponent, TemplateMenuComponent, TemplateMenuItemComponent ],
  providers: [ RegionService ]
})
export class TemplateModule {}

这个 TemplateModule 滴流到我的 AppRoutingModule，最后滴流到 AppModule，在那里一切都是自举的。

如何在 HomeComopnent 中使用 Request 组件？

I've checked out this https://angular.io/guide/sharing-ngmodules

看来我做错了什么，我也说不清是什么。

如果需要更多信息，请告诉我，以便我编辑此问题。

Answer 1

您的共享 RequestModule 模块需要 export 它想要提供给导入它的任何其他模块的所有服务和组件。

因此您的 RequestModule 需要看起来像：

@NgModule({
  imports: [
     // Stuff here
  ],
  declarations: [
    RequestComponent,
    // Other components, etc
  ],
  exports: [
    RequestComponent //<-- Component now available to modules which import this one
  ]
  providers: [
     // Stuff here
  ]
})
export class RequestModule { }

来自 Angular 导出文档

exports: The set of components, directives, and pipes declared in this NgModule that can be used in the template of any component that is part of an NgModule that imports this NgModule. Exported declarations are the module's public API. https://angular.io/api/core/NgModule

编辑： 根据您的评论，您在路由中延迟加载模块。这与将其添加为对模块的 import 引用不同。惰性加载模块在半隔离状态下工作（例如，它有自己的依赖注入容器）。

如果您需要一个组件以您现在的方式使用，您的 TemplateModule（具有 HomeComponent）需要 import RequestModule。

可能值得回顾一下为什么 HomeComponent 中需要此组件。也许它应该是一个共享模块？

Angular 7. 如何导入这个共享模块？

Angular 7. How can I import this shared module?

angular

angular-module