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出口文件

导出：此NgModule中声明的组件，指令和管道的集合，可在导入此NgModule的NgModule的任何组件的模板中使用。导出的声明是模块的公共API。 https://angular.io/api/core/NgModule

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

如果您需要按原样使用组件，则TemplateModule（具有HomeComponent）需要import RequestModule。

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

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

1 个答案: