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 をインストールし、環境変数を設定する方法の詳細な説明
1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...
背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...
MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...
MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...
プロジェクトの目的元のWindows環境でphpstudyを使用して構築されたMySQL 5.5.5...
ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...
序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...
コードをコピーコードは次のとおりです。 window.location.href="zcb...
目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...
港Harborは、エンタープライズレベルのプライベートDockerイメージリポジトリを構築するための...
[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...
友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...
目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...
序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...
原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...