Angular - 跨多个模块使用组件

Question

我在用什么

• 角

我想做什么

• 我有一个我想在多个模块中重用的加载组件

我做了什么

• 我创建了一个名为'loading-overlay'的新模块

• 在这个模块中,我导出了叠加组件

• 我将此模块添加到app.module

• 将组件添加到多个模块时,我收到以下错误:

类型LoadingOverlayComponent是2个模块的声明的一部分:LoadingOverlayModule和ProjectsModule!请考虑将LoadingOverlayComponent移动到导入LoadingOverlayModule和ProjectsModule的更高模块.您还可以创建一个新的NgModule,它导出并包含LoadingOverlayComponent,然后在LoadingOverlayModule和ProjectsModule中导入该NgModule.

• 我已经尝试从app.module中删除它并将其导入我需要的其他模块而没有太多运气.我必须遗漏一些明显的东西.

叠加模块

// Modules
import { NgModule } from '@angular/core';

// Components
import { LoadingOverlayComponent } from './loading-overlay.component';



@NgModule({
  declarations: [
    LoadingOverlayComponent,
  ],

  imports: [

  ],

  exports: [
    LoadingOverlayComponent
  ],

  providers: [ ],

})

export class LoadingOverlayModule { }

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Routing
import { AppRouting } from './routing/app-routing';

// Modules
import { ProjectsModule } from './projects/projects.module';
import { UserModule } from './user/user.module';
import { LoadingOverlayModule } from './loading-overlay/loading-overlay.module';


// Services / Providers
import { AuthService } from './user/auth.service'





@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRouting,
    LoadingOverlayModule  
  ],
  providers: [
    AuthService,

  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

项目模块

// Modules
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { LoadingOverlayModule } from '../loading-overlay/loading-overlay.module';

import { LoadingOverlayComponent } from '../loading-overlay/loading-overlay.component';






@NgModule({
  declarations: [

    LoadingOverlayComponent
  ],

  imports: [
    CommonModule,
    RouterModule,

    LoadingOverlayModule
  ],

  providers: [ ],

})

export class ProjectsModule { }

任何帮助指出我愚蠢错过的将非常感谢:)

Answer 1

一般回答

对于那些正在寻找与我类似的通用答案的人：

1. 从 appmodule 中删除已创建的组件
2. 创建新模块，例如SharedModule
3. 导入和导出已创建的组件
4. 将模块导入到已需要组件的模块中

就是这样！

更长的解释

components我想在整个项目中分享一些内容。我创建了一个名为的新模块ComponentsModule，如下所示：

     @NgModule({
      declarations: [
        BannerComponent,
        ImageAndTextComponent,
        InfoAndImageComponent
      ],
      imports: [
        CommonModule
      ],
      exports: [
        BannerComponent,
        
      ]
    })
    export class ComponentsModule { }

我想使用BannerComponentin UtviklingComponentwhich is 的子项UtviklingModule。UtviklingModule您可以查看下面的代码

   @NgModule({
      declarations: [
        UtviklingComponent,
      ],
      imports: [
        CommonModule,
        ComponentsModule,
        RouterModule.forRoot([
          {path: 'utvikling', component: UtviklingComponent,data: {animation: "UtviklingPage"}},
        ])
      ]
    })
    export class UtviklingModule { }

Answer 2

去掉 ：

LoadingOverlayModule 从 AppModule

LoadingOverlayComponent 从 ProjectsModule

和：

import LoadingOverlayModule 哪里需要

Answer 3

LoadingOverlayModule是共享模块。它有自己的组件。现在，要使用其组件，您需要将LoadingOverlayModule导入到Project模块中。从项目模块的声明中删除LoadingOverlayComponent。

您将需要另一个组件（例如ProjectComponent）来进行项目模块声明。将共享模块导入项目模块后，您可以使用选择器直接在ProjectComponent模板中使用覆盖组件。希望这可以帮助。