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

Posted 2023-03-13

【中文标题】Angular 2+，有啥方法可以声明一个模块中的所有组件，然后在 app.module.ts 中导入？

【英文标题】：Angular 2+, Is there any way I can declare all the components in a module and then import in app.module.ts?Angular 2+，有什么方法可以声明一个模块中的所有组件，然后在 app.module.ts 中导入？

【发布时间】：2019-01-31 17:35:57

【问题描述】：

您好，我正在尝试在单个模块中声明所有组件，然后将该组件模块添加到 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  

【问题讨论】：

此链接可能对您有所帮助：malcoded.com/posts/angular-fundamentals-modules

谢谢兄弟，正在研究。 :)

【参考方案1】：

而不是importing 组件，您应该在ComponentsModule 中使用declare 它们

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

【讨论】：

由模块“ComponentsModule”声明的意外模块“CommonModule”。请添加@Pipe/@Directive/@Component 注解。这就是我得到的。

请参阅此帖子***.com/questions/43603515/… 以更好地了解应该导入、提供和声明的内容。

您可能在ComponentsModule 中声明了CommonModule。相反，您应该在 ComponentsModule 中 import 它。

谢谢阿米特！有效。我已经导入了 CommonModule，这就是它不起作用的原因。此外，RoutingModule 存在问题。我需要在 app.module.ts 中导入两次，然后在 ComponentsModule 中导入两次吗？？

如果您的意思是RouterModule，是的，您将在所有routing 文件中导入它以注册您的路线，例如应用模块中的RouterModule.forRoot(routes) 和子模块中的RouterModule.forChild(routes)。