Angular

Question

我在用什么

Angular

我想做什么

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

我做了什么

我创建了一个名为 'loading-overlay'
在这个模块中我导出了覆盖组件
我把这个模块加到app.module
将组件添加到多个模块时，我收到以下错误：

Type LoadingOverlayComponent is part of the declarations of 2 modules: LoadingOverlayModule and ProjectsModule! Please consider moving LoadingOverlayComponent to a higher module that imports LoadingOverlayModule and ProjectsModule. You can also create a new NgModule that exports and includes LoadingOverlayComponent then import that NgModule in LoadingOverlayModule and ProjectsModule.

我曾尝试将其从 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

删除：

LoadingOverlayModule 来自 AppModule

LoadingOverlayComponent 来自 ProjectsModule

并且：

import LoadingOverlayModule 需要的地方

Answer 2

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

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

Answer 3

一般答案

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

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

就是这样！

更长的解释

我有一些 components我想在整个项目中分享。我创建了一个名为 ComponentsModule 的新模块，它看起来像这样：

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

我想在 UtviklingComponent 中使用 BannerComponent，它是 UtviklingModule 的 child。您可以在下方查看 UtviklingModule 的代码

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

Angular - 跨多个模块使用一个组件

Angular - Using a component across multiple modules

angular-module

一般答案

就是这样！

更长的解释