angular - Angular 2+，有什么方法可以声明一个模块中的所有组件，然后在 app.module.ts 中导入？

Question

嗨，我正在尝试在单个模块中声明所有组件，然后将该组件模块添加到 app.module.ts 的导入中。

import { LandingPageComponent } from './landing-page/landing-page.component';
import { JobSeekerComponent } from './job-seeker/job-seeker.component';
import { RecruiterComponent } from './recruiter/recruiter.component';
import { PostJobsComponent } from './recruiter/post-jobs/post-jobs.component';
import { JobSeekerLayoutComponent } from './layout/job-seeker-layout/job-seeker-layout.component';
import { RecruiterLayoutComponent } from './layout/recruiter-layout/recruiter-layout.component';
import { RecruiterHeaderComponent } from './layout/recruiter-header/recruiter-header.component';
import { AutocompleteComponent } from './common/autocomplete/autocomplete.component';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
    exports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
})
export class **ComponentsModule** { }

这是我创建的组件模块，然后我想在 app.module.ts 中初始化它。这会起作用吗，因为当我尝试这样做时，它会引发错误 请添加@NgModule 注释。在我的 app.module.ts 中。我做了这样的事情。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { **ComponentsModule** } from './components';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent  
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    AppRoutingModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    **ComponentsModule**
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

标签： angular

Answer 1

而不是importing组件，您应该将declare它们放入ComponentsModule

@NgModule({
    declarations: [           // declare components here
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
    exports: [
        LandingPageComponent,
        JobSeekerComponent,
        RecruiterComponent,
        PostJobsComponent,
        JobSeekerLayoutComponent,
        RecruiterLayoutComponent,
        RecruiterHeaderComponent,
        AutocompleteComponent
    ],
})