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 導入チュートリアル
...こんな感じで、今日はポップアップウィンドウを作ろうと思ったのですが、バックエンド PHP によ...
1. W3C バージョンの flex 2009年版フラグ: display: box; または bo...
目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...
目次動的パーティクル効果は次のとおりです。プラグインをインストールする動的パーティクル効果は次のとお...
目次MySQL クエリツリー構造1. ツリー構造について2. MySQLでカスタム関数を定義する方法...
Redis は分散キャッシュ サービスです。キャッシュは、大規模システムの開発やパフォーマンスの最適...
場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...
Vue を学習する際に、vscode ターミナルで常に webpack 命令を使用すると、次のよう...
Nestjs 例外フィルターといえば、非常に強力な .Net のグローバル フィルターについて触れな...
ご存知のとおり、私たちが毎日閲覧する Web ページ、Web サイト、または Web ページには独自...
この記事ではMySQL 8.0.15のインストールと設定方法を参考までに記録します。具体的な内容は以...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
JDKダウンロードアドレス: http://www.oracle.com/technetwork/j...
序文始める前に、ファイル属性とファイル属性を変更する方法について簡単に理解しておく必要があります。 ...
イベントバブリング、イベントキャプチャ、イベント委任JavaScript では、イベント委譲は非常に...