Angular - 跨多个模块使用组件

Posted 2023-03-13

【中文标题】Angular - 跨多个模块使用组件

【英文标题】：Angular - Using a component across multiple modules

【发布时间】：2018-04-28 13:06:10

【问题描述】：

我正在使用什么

角度

我要做什么

我有一个加载组件想要跨多个模块重用

我做了什么

我创建了一个名为“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  

任何帮助指出我愚蠢地错过的东西将不胜感激。

【问题讨论】：

按照错误说的做？从ProjectsModule 中删除LoadingOverlayComponent？

混蛋。那是我的错。我很快就尝试了很多东西，我忘了删除它。但是，现在已将其删除，我得到以下信息：“'app-loading-overlay' 不是已知元素：如果 'app-loading-overlay' 是 Angular 组件，则验证它是否是此模块的一部分。” - 这可能就是我最终在模块中添加组件的原因。

ProjectsModule和AppModule是什么关系？除了这两个之外，您是否在任何其他模块中使用它？

嗨 Echonax - 应用程序模块正在导入我拥有和需要的每个模块，包括 ProjectsModule。 ProjectModule 仅包含用于显示项目列表的模块和组件（组件、角度材料模块等）

您需要在使用其任何指令的每个模块中导入LoadingOverlayModule。也许您错过了将其导入某个地方？

【参考方案1】：

删除：

LoadingOverlayModule 来自AppModule

LoadingOverlayComponent 来自ProjectsModule

还有：

importLoadingOverlayModule 需要的地方

【讨论】：

谢谢大家。事实证明确实有效。其他人碰巧将 sn-p 添加到了另一个我不知道的 html 组件中，并且它没有在错误中抛出它！谢谢你的时间。非常感谢。

@MegaTron，有时会发生，现在你更聪明了 :)

我需要更多解释。你能提供更多细节吗？就像我想在检查身份验证时在登录中使用该加载组件，或者我需要使用该组件的其他模块，所以我需要在哪里导入？在组件或模块上还是在哪里？

【参考方案2】：

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

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

【参考方案3】：

一般回答

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

从 appmodule 中移除已创建的组件 创建新模块，例如SharedModule 导入和导出已创建的组件 将模块导入到已经需要组件的模块中

就是这样！

---

更长的解释

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

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

我想在UtviklingComponent 中使用BannerComponent，它是UtviklingModule 的子代。你可以在下面看到UtviklingModule的代码

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