1. 共有共通モジュール共有モデルを作成する: ng gm share 共有する必要があるすべてのモジュールは、インポート後にエクスポートされます。 現時点では CommonModule のみが存在し、将来的には共有する必要があるコンポーネントがいくつか存在する予定です。 '@angular/core' から NgModule をインポートします。 '@angular/common' から CommonModule をインポートします。 @Ngモジュール({ 輸入: [ 共通モジュール ]、 輸出: 共通モジュール ]、 宣言: [] }) SharedModuleクラスをエクスポートします。 コア モジュールをアプリ モジュールにインポートします。 '@angular/platform-browser' から 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 の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL ロック(テーブルロック、行ロック、共有ロック、排他ロック、ギャップロック)の詳細な説明
>>: Linux 環境での Oracle 導入チュートリアル
インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...
fdisk と比較すると、parted はあまり使用されず、主に 2T を超えるパーティションに使用...
MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
前の 2 つの章を終えて、ボタンのフローティング アニメーションについて新たな理解が得られましたか?...
初期のコンピュータでは ASCII 文字しか使用できませんでしたが、コンピュータのアプリケーションの...
少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...
目次回避策Vue2.0 で 2 つの配列の変更を監視できないのはなぜですか?ソースコード分析ヴュー3...
Linux ではすべてがファイルなので、Android システム自体は Linux + Java だ...
1. Docker Compose の使用方法は docker コマンドの使用方法と非常に似ています...
画像をプルする docker プル mysql完成した画像を見る Docker イメージイメージを介...
許可が拒否されました:その理由は、ファイルの読み取り、書き込み、作成、削除などの権限がないためです。...
この記事では、VMware 12でのUbuntu 16.04のインストールチュートリアルを参考までに...
目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...
Dockerのインストール手順をスキップする1. postgresqlイメージを取得する docke...