在[Angular]中，模块之间共享组件

3 年 ago
文, 翔
2 minutes

简要概述

    Reactではコンポーネントはimportすればどこからでも使うことができるが、Angularでは一手間加えないとできなかったのでやり方のメモ

做法。

    共通コンポーネント用のSharedModuleを作成してそれらを各moduleでimportすることで使えるようになる

样品

    以下のようなhomeモジュールとaboutモジュールでCustomButtonコンポーネントを共有したい場面を想定して説明します
% tree src/app/
src/app/
├── app-routing.module.ts
├── app.component.ts
├── app.module.ts
├── custom-button
│   └── custom-button.component.ts
├── about
│   ├── about-routing.module.ts
│   ├── about.component.ts
│   └── about.module.ts
└── home
    ├── home-routing.module.ts
    ├── home.component.ts
    └── home.module.ts

创建一个SharedModule

    共有コンポーネントを管理するSharedModuleを作成します
ng generate module shared
    • 生成されたshared.module.tsに共有したいCustomButtonの定義を追加します

declarationsとexportsの2か所に追加する必要があるので注意

共有したいコンポーネントを新しく作るときは同じように追加していくことになります

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomButtonComponent } from '../custom-button/custom-button.component';

@NgModule({
  declarations: [CustomButtonComponent],
  imports: [CommonModule],
  exports: [CustomButtonComponent],
})
export class SharedModule {}

在AppModule中引入SharedModule。

    • 作成したSharedModuleをapp.module.tsで読み込むようにします

importsに追加します

共有コンポーネント(この例ではCustomButton)の定義が入っている場合は消しておきます

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, SharedModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
    ここまでが事前準備的なところです

在需要使用共用組件的模塊中載入SharedModule。

    • 今回の例でいうとhomeモジュールとaboutモジュールでCustomButtonを使いたいためそれぞれのmoduleでSharedModuleを読み込むようにします

それぞれimportsに追加します

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { HomeRoutingModule } from './home-routing.module';
import { HomeComponent } from './home.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [HomeComponent],
  imports: [CommonModule, HomeRoutingModule, SharedModule],
})
export class HomeModule {}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AboutRoutingModule } from './about-routing.module';
import { AboutComponent } from './about.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [AboutComponent],
  imports: [CommonModule, AboutRoutingModule, SharedModule],
})
export class AboutModule {}
    • これで完成です！

 

    homeモジュールとaboutモジュール内でが使えるようになりました

总结

    • 共有したいコンポーネントはSharedModuleで管理してappモジュールと、コンポーネントを使いたいモジュールでimportすることで使い回せるようになりました

 

    appモジュールでもimportしないといけないのが個人的にはまりどころでした

参考页面

    • https://stackoverflow.com/questions/39486029/share-component-between-2-modules

 

    https://angular.jp/guide/sharing-ngmodules
bannerAds