Angular 7. Как я могу импортировать этот общий модуль? - PullRequest
Новая
       13

Angular 7. Как я могу импортировать этот общий модуль?

1 голос
/ 22 марта 2019

У меня есть модуль с именем RequestModule.Я пытаюсь использовать один из его компонентов RequestComponent и его Services внутри другого компонента, называемого HomeComponent

. Я подумал, что могу просто использовать Request component в моем home.component.html, используяселектор вроде так

Home.Component.Html ... <request></request> ... но я ошибся.Я получаю эту ошибку.

: «запрос» не является известным элементом: 1. Если «запрос» является угловым компонентом, то убедитесь, что он является частью этого модуля.

Как я могу использовать этот модуль в моем домашнем компоненте?

Вот мой 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 {}

This TemplateModule Tricklesдо моего AppRoutingModule, который, наконец, доходит до AppModule, где все загружается.

Как я могу использовать Request Компонент внутри моего HomeComopnent?

Я проверил это https://angular.io/guide/sharing-ngmodules

Похоже, я сделал что-то не так, и я не могу сказать, что это такое.

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать, чтобы я мог отредактировать этот вопрос.

1 Ответ

2 голосов
/ 22 марта 2019

Ваш общий 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.Может быть, это должен быть общий модуль?

...