Angularプロジェクトにおける共有モジュールの実装の詳細な説明

Angularプロジェクトにおける共有モジュールの実装の詳細な説明

1. 共有共通モジュール

共有モデルを作成する: ng gm share

共有する必要があるすべてのモジュールは、インポート後にエクスポートされます。

現時点では CommonModule のみが存在し、将来的には共有する必要があるコンポーネントがいくつか存在する予定です。

'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。

@Ngモジュール({
  輸入: [
    共通モジュール
  ]、
  輸出:
    共通モジュール
  ]、
  宣言: []
})
SharedModuleクラスをエクスポートします。

コア モジュールをアプリ モジュールにインポートします。

'@angular/platform-b​​rowser' から BrowserModule をインポートします。
'@angular/core' から NgModule をインポートします。

'./app.component' から { AppComponent } をインポートします。
'./core/core.module' から {CoreModule} をインポートします。

@Ngモジュール({
  宣言: [
    アプリコンポーネント
  ]、
  輸入: [
    ブラウザモジュール、
    コアモジュール
  ]、
  プロバイダー: [],
  ブートストラップ: [AppComponent]
})
クラス AppModule をエクスポートします { }

2. 共有マテリアルモジュール

管理を容易にするために、Material 関連コンポーネントのインポートとエクスポートを別のモジュールに配置し、ShareModule でインポートとエクスポートを行います。

'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。
import { MatToolbarModule、MatSidenavModule、MatButtonModule、MatCardModule、MatInputModule、MatListModule、MatSlideToggleModule、MatGridListModule、MatDialogModule、MatAutocompleteModule、MatMenuModule、MatCheckboxModule、MatTooltipModule、MatDatepickerModule、MatRadioModule、MatNativeDateModule、MatSelectModule } from '@angular/material';
'@angular/material' から MatIconModule をインポートします。

定数モジュール=[
  MatSidenavモジュール、
  MatIconモジュール、
  MatToolbarモジュール、
  MatIconモジュール、
  マットボタンモジュール、
  マットカードモジュール、
  MatInputModule、
  MatListモジュール、
  MatSlideToggleModule、
  MatGridListモジュール、
  MatDialogモジュール、
  MatAutocompleteモジュール、
  マットメニューモジュール、
  MatCheckboxモジュール、
  MatTooltipModule、
  MatDatepickerモジュール、
  MatRadioモジュール、
  MatNativeDateModule、
  マット選択モジュール
];

@Ngモジュール({
  宣言: [],
  輸入: [
    モジュール
  ]、
  輸出:
    モジュール
  ]
})
クラスMaterialModuleをエクスポートします{}
'@angular/core' から NgModule をインポートします。
'@angular/common' から CommonModule をインポートします。
'../material/material.module' から MaterialModule をインポートします。
'./confirm-dialog/confirm-dialog.component' から ConfirmDialogComponent をインポートします。

@Ngモジュール({
  輸入: [
    共通モジュール、
    マテリアルモジュール
  ]、
  輸出:
    共通モジュール、
    マテリアルモジュール
  ]、
  宣言: [ConfirmDialogComponent]
})
SharedModuleクラスをエクスポートします。

3. 共有確認ダイアログ

確認ダイアログ ボックスは、タスクを削除する場合でもプロジェクトを削除する場合でも使用されるため、sharedModule に配置されます。

$ ng gc 共有/確認ダイアログ

ng gc shared/confirm-dialog -it -isを使用してインラインテンプレートとスタイルを作成することもできます。

<フォーム>
  <h2 md-dialog-title>{{タイトル}}</h2>
  <div マットダイアログコンテンツ>
    {{コンテンツ}}
  </div>
  <div マットダイアログアクション>
    <button type="button" mat-raised-button color="primary" (click)="onClick(true)">OK</button>
    <button type="button" mat-button mat-dialog-close (click)="onClick(false)">キャンセル</button>
  </div>
</フォーム>
"@angular/core" から Component、OnInit、Inject をインポートします。
"@angular/material" から MatDialogRef をインポートします。
"@angular/material" から { MAT_DIALOG_DATA } をインポートします。

@成分({
  セレクター: "app-confirm-dialog",
  テンプレート URL: "./confirm-dialog.component.html",
  スタイル URL: ["./confirm-dialog.component.scss"]
})
ConfirmDialogComponentクラスをエクスポートし、OnInitを実装します。
  タイトル = "";
  コンテンツ = "";
  コンストラクタ(
    プライベートダイアログRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) プライベートデータ
  ){}

  ngOnInit() {
    this.title = this.data.title;
    this.content = this.data.content;
  }
  onClick(結果: ブール値) {
    this.dialogRef.close(結果);
  }
}

次に、ConfirmDialogComponent コンポーネントを sharedModule に配置します。

"@angular/core" から NgModule をインポートします。
"@angular/common" から CommonModule をインポートします。
「../material/material.module」から {MaterialModule} をインポートします。
「./confirm-dialog/confirm-dialog.component」から ConfirmDialogComponent をインポートします。

@Ngモジュール({
  インポート: [CommonModule、MaterialModule]、
  エクスポート: [CommonModule, MaterialModule],
  宣言: [ConfirmDialogComponent],
  エントリコンポーネント: [ConfirmDialogComponent]
})
SharedModuleクラスをエクスポートします。

ConfirmDialog を使用する場合は、「プロジェクトの削除」を参照してください。

上記は、Angular プロジェクトでの共有モジュールの実装に関する詳細な説明です。Angular の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Angular2モジュールと共有モジュールの詳細な説明
  • Angular構造ディレクティブモジュールとスタイルの詳細な説明
  • Angular マルチモジュール プロジェクトのビルド プロセス
  • angular2 NgModel モジュールの具体的な使用法
  • 遅延モジュールのプリロードを実装する Angular の例
  • ルーティングを使用したAngularモジュールの遅延読み込みの詳細な説明
  • Angular2モジュールの遅延読み込み方法についての簡単な説明

<<:  MySQL ロック(テーブルロック、行ロック、共有ロック、排他ロック、ギャップロック)の詳細な説明

>>:  Linux 環境での Oracle 導入チュートリアル

推薦する

今日、私は非常に奇妙なクリックの問題に遭遇し、自分で解決しました

...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...

フレックスレイアウトの互換性の問題の概要

1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...

Tomcatアーキテクチャの原則をアーキテクチャ設計に分析する

目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...

Vue ログインページ用の動的パーティクル背景プラグインの実装

目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...

MySQLクエリツリー構造方式

目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...

DockerにRedisをインストールし、パスワードを設定して接続する方法

Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

nestjs における例外フィルター Exceptionfilter の具体的な使用法

Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...

.html、.htm、.shtml、.shtm の違いと関連性について簡単に説明します。

ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...

Win10 での MySQL 8.0.15 のインストールと設定のグラフィック チュートリアル

この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...

MySQLデータベースのタイムアウト設定を構成する方法の例

目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...

Linux環境で環境変数を設定する方法

JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...

CentOS のファイルと権限の基本操作チュートリアル

序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...

イベントバブリング、イベントキャプチャ、イベント委任に基づく詳細な説明

イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...