1. 構造指示* は構文糖衣であり、<a *ngIf="user.login">logout</a> は以下と同等である。 <ng-template [ngIf]="user.login"> <a>終了</a> </ng-テンプレート> ng-template の記述は避けてください。 <ng-template [ngIf]="item.reminder"> <mat-icon> アラーム </mat-icon> </ng-テンプレート> <!-- <mat-icon *ngIf="item.reminder"> アラーム </mat-icon> --> 構造指示によって構造を変更できるのはなぜですか? ngIfソースコード set メソッドは @Input としてマークされます。条件が true でビューが存在しない場合は、内部の hasView フラグが true に設定され、viewContainer を通じてテンプレートに従って子ビューが作成されます。 条件が真でない場合、ビュー コンテナーの内容はクリアされます。 viewContainerRef: コンテナ、命令が配置されているビューのコンテナ モジュールモジュールとは何ですか?ファイルを整理するために使用される、独立した機能を持つファイルのコレクション。 モジュールのメタデータ entryComponents: 呼び出されたときではなく、モジュール (ダイアログ ボックスなど) に入るとすぐに読み込まれます。 エクスポート: モジュールの内部コンテンツを公開したい場合は、エクスポートする必要があります。 forRoot() とは何ですか? インポート: [RouterModule.forRoot(routes)], インポート: [RouterModule.forChild(route)]; 実際、forRoot と forChild は 2 つの静的ファクトリ メソッドです。 コンストラクター(ガード: any、ルーター: Router); /** * すべてのルータープロバイダーとディレクティブを含むモジュールを作成します。また、オプションで * アプリケーション リスナーが初期ナビゲーションを実行します。 * * オプション(`ExtraOptions` を参照): * * `enableTracing` により、ルータはすべての内部イベントをコンソールに記録します。 * * `useHash`は、履歴の代わりにURLフラグメントを使用するロケーション戦略を有効にします。 * API。 * * `initialNavigation` は初期ナビゲーションを無効にします。 * * `errorHandler` はカスタム エラー ハンドラーを提供します。 * * `preloadingStrategy` はプリロード戦略を設定します (`PreloadAllModules` を参照)。 * * `onSameUrlNavigation`は、ルータが現在のURLへのナビゲーションをどのように処理するかを設定します。 * 詳細については `ExtraOptions` を参照してください。 * * `paramsInheritanceStrategy`は、ルータがパラメータ、データ、解決されたデータをマージする方法を定義します。 * 親ルートから子ルートへ。 */ 静的 forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>; /** * すべてのルーターディレクティブとルートを登録するプロバイダーを含むモジュールを作成します。 */ 静的 forChild(routes: Routes): ModuleWithProviders<RouterModule>; } メタデータはさまざまな状況に応じて変化します。メタデータを動的に指定する方法はありません。メタデータを書き込まないでください。静的エンジニアリング メソッドを直接構築し、モジュールを返します。 forRoot()を書くサービスモジュールを作成します:$ ng gm services '@angular/core' から NgModule をインポートします。 '@angular/common' から CommonModule をインポートします。 @Ngモジュール({ 宣言: [], 輸入: [ 共通モジュール ] }) クラス ServicesModule をエクスポートします { } ServiceModule 内のメタデータは不要になりました。静的メソッド forRoot によって返されます。 '@angular/core' から NgModule、ModuleWithProviders をインポートします。 '@angular/common' から CommonModule をインポートします。 @Ngモジュール() クラス ServicesModule をエクスポートします { 静的 forRoot():ModuleWithProviders{ 戻る { ngModule: サービスモジュール、 プロバイダー:[] } } } コアモジュールにインポートするときに使用 インポート: [ServicesModule.forRoot();] 3. スタイルの定義ngClass、ngStyle、[class.yourclass] ngClass: 特定の条件下でスタイル クラスを動的に指定するために使用されます。大量のスタイル変更が行われる状況に適しています。事前定義されたクラス。 <mat-list-item class="container" [@item]="widerPriority" [ngClass]="{ '優先度-通常':item.priority===3, '優先度-重要':item.priority===2, '優先度-緊急':item.priority===1 }" ngStyle: 特定の条件下でスタイルを動的に指定するために使用され、小さな変更がある状況に適しています。たとえば、次の例では [ngStyle]="{'order':list.order}" です。キーは文字列です。 [class.yourclass] :[class.yourclass] = "condition" は条件に直接対応します。このクラスを適用するにはこの条件が満たされます。これは ngClass の書き方と同等であり、ngClass の変形および省略形に相当します。 <div class="content" mat-line [class.completed]="item.completed"> <span [matTooltip]="item.desc">{{item.desc}}</span> </div> ドラッグ時の順序を調整するにはngStyleを使用します原則としては、フレックス コンテナー スタイルの順序をリスト モデル オブジェクト内の順序として動的に指定することです。 1. taskHomeのapp-task-listに順序を追加する list-container はフレックスコンテナであり、その配置順序は order に従ってソートされます。 <app-task-list *ngFor="リストのリストを作成" クラス="リストコンテナ" アプリをドロップ可能="true" [dropTags]="['タスク項目','タスクリスト']" [dragEnterClass]="'ドラッグして入力'" [アプリドラッグ可能]="true" [dragTag]="'タスクリスト'" [draggedClass]="'drag-start'" [dragData]="リスト" (ドロップ)="handleMove($event,list)" [ngStyle]="{'order': list.order}" > 2. リストデータ構造には順序が必要なので、order属性を追加します。 リスト = [ { id: 1, 名前:「ToDo」、 順序: 1, タスク: { id: 1, 説明: 「タスク 1: スターバックスに行ってコーヒーを買う」 完了: true、 優先度: 3, 所有者: id: 1, 名前:「張三」 アバター: "avatars:svg-11" }, 期日: 新しい日付()、 リマインダー: 新しい日付() }, { id: 2, 説明: 「タスク 1: 上司から割り当てられた PPT 課題を完了する」 完了: 偽、 優先度: 2, 所有者: id: 2, 名前:「李思」 アバター: "avatars:svg-12" }, dueDate: 新しい日付() } ] }, { id: 2, 名前:「進行中」、 注文:2, タスク: { id: 1, 説明: 「タスク 3: プロジェクト コード レビュー」、 完了: 偽、 優先度: 1、 所有者: id: 1, 名前: 「王武」、 アバター: "avatars:svg-13" }, dueDate: 新しい日付() }, { id: 2, 説明: 「タスク 1: プロジェクト計画を作成する」 完了: 偽、 優先度: 2, 所有者: id: 2, 名前:「李思」 アバター: "avatars:svg-12" }, dueDate: 新しい日付() } ] } ]; 3. リストをドラッグして順序を変更する 2つのsrcListとターゲットリストの順序を入れ替える ハンドル移動(ソースデータ、ターゲットリスト){ スイッチ (srcData.tag) { ケース 'タスク項目': console.log('アイテムを処理しています'); 壊す; ケース 'タスクリスト': console.log('処理リスト'); srcList を srcData.data に格納します。 srcList の順序を定数で指定します。 srcList.order = targetList.order; ターゲットリストの順序 = tempOrder; デフォルト: 壊す; } } 上記は、Angular 構造ディレクティブ モジュールとスタイルの詳細な説明です。Angular 構造ディレクティブ モジュールとスタイルの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: MySQL5.7.21 解凍版インストール詳細チュートリアル図
>>: Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明
今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...
ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...
最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...
Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...
<input> タグ<input> タグはユーザー情報を収集するために使用さ...
Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...
注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...
この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...
まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...
以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...
目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...
vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...
目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...
テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...
目次1. React.Children.map 2. React.Children.forEach ...