web-dev-qa-db-ja.com

Angular-複数のモジュールにわたるコンポーネントの使用

私が使用しているもの

  • Angular

私がやろうとしていること

  • 複数のモジュールで再利用したい読み込みコンポーネントがあります

私がやったこと

  • 「loading-overlay」という新しいモジュールを作成しました

  • このモジュール内で、オーバーレイコンポーネントをエクスポートします

  • このモジュールをapp.moduleに追加します

  • コンポーネントを複数のモジュールに追加すると、次のエラーが表示されます。

タイプLoadingOverlayComponentは2つのモジュールの宣言の一部です：LoadingOverlayModuleとProjectsModule！ LoadingOverlayComponentを、LoadingOverlayModuleとProjectsModuleをインポートする上位モジュールに移動することを検討してください。また、LoadingOverlayComponentをエクスポートおよびインクルードする新しいNgModuleを作成し、そのNgModuleをLoadingOverlayModuleおよび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 { }

私が愚かに逃したものを指摘する助けがあれば、大歓迎です。

angularangular-module
12
MegaTron

削除する ：

LoadingOverlayModuleからAppModule

LoadingOverlayComponentからProjectsModule

そして：

importLoadingOverlayModule必要な場所

5
Vivek Doshi

LoadingOverlayModuleは共有モジュールです。独自のコンポーネントがあります。次に、そのコンポーネントを使用するには、プロジェクトモジュールにLoadingOverlayModuleをインポートする必要があります。プロジェクトモジュールの宣言からLoadingOverlayComponentを削除します。

プロジェクトモジュールの宣言には、別のコンポーネント（たとえばProjectComponent）が必要です。共有モジュールがプロジェクトモジュールにインポートされると、セレクターを使用して、ProjectComponentテンプレートでオーバーレイコンポーネントを直接使用できます。お役に立てれば。

5
Hiralal Manmode