角度-跨多个模块使用组件

Question

我正在使用什么

• 角

我想做的是

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

我做了什么

>

我创建了一个名为“加载覆盖”的新模块

在此模块中，我导出覆盖组件

我将此模块添加到app.module

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

类型加载覆盖组件是两个模块声明的一部分：加载覆盖模块和项目模块！请考虑将加载覆盖组件移动到导入加载覆盖模块和项目模块的更高模块。您还可以创建一个新的NgMoules，导出并包含加载覆盖组件，然后在加载覆盖模块和项目模块中导入该Ng模块。

• 我尝试将其从 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. 从app模块中删除已经创建的组件
2. 创建新模块，例如SharedMoules
3. 导入和导出已创建的组件
4. 将模块导入到已经需要组件的模块中

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

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

我想在< code>UtviklingComponent中使用< code>BannerComponent，该组件是< code>UtviklingModule的子组件。您可以在下面看到< code>UtviklingModule的代码

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

Answer 2

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

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

Answer 3

删除：

从< code>AppModule中< code >加载OverlayModule

从项目加载覆盖组件模块

并且:

导入加载覆盖模块需要的地方