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

Question

我有一个名为RequestModule的模块。我正试图在其他组件RequestComponent中使用其中一个组件Services及其HomeComponent

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

Home.Component.Html
...
<request></request>
...

但我错了。我收到了这个错误。

：'request'不是已知元素：1。如果'request'是Angular组件，则验证它是否是此模块的一部分。

如何在我的家庭组件中使用此模块？

这是我的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，一切都是自助式的。

如何在Request中使用HomeComopnent组件？

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：在此NgModule中声明的组件，指令和管道集，可以在任何组件的模板中使用，该组件是导入此NgModule的NgModule的一部分。导出的声明是模块的公共API。 https://angular.io/api/core/NgModule

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

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

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