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 導入チュートリアル

推薦する

MySQLにインデックスを追加する方法

インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...

Linux parted ディスク パーティション実装手順の分析

fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...

MySQLにおける正規表現の一般的な使用法

MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...

Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明

序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...

マウスオーバーボタンアニメーションを実現する純粋な CSS3 パート 2

前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...

Web ページでの Unicode 文字の使用の概要 (&#、\u など)

初期のコンピュータでは ASCII 文字しか使用できませんでしたが、コンピュータのアプリケーションの...

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...

Vue2で配列の変更を検出できない理由と解決策

目次回避策Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?ソースコード分析ヴュー3...

ファイル書き込みを使用して Linux アプリケーションをデバッグする方法

Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...

一般的なDocker Composeコマンドの詳細な説明

1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...

Docker で MySQL をインストールし、リモート接続を実装するチュートリアル

画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...

Linuxで権限が拒否された場合の解決策の詳細な説明

許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...

VMware 12 での Ubuntu 16.04 インストール チュートリアル

この記事では、VMware 12でのUbuntu 16.04のインストールチュートリアルを参考までに...

JSにおける4つのデータ型判定方法

目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...

docker で PostgreSQL データベースをインストールして永続化する方法

Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...