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

'@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 をエクスポートします { }

'@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クラスをエクスポートします。

<フォーム>
  <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(結果);
  }
}

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

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