Angular構造ディレクティブモジュールとスタイルの詳細な説明

Angular構造ディレクティブモジュールとスタイルの詳細な説明

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 の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Angular2モジュールと共有モジュールの詳細な説明
  • Angular マルチモジュール プロジェクトのビルド プロセス
  • angular2 NgModel モジュールの具体的な使用法
  • 遅延モジュールのプリロードを実装する Angular の例
  • ルーティングを使用したAngularモジュールの遅延読み込みの詳細な説明
  • Angular2モジュールの遅延読み込み方法についての簡単な説明
  • Angularプロジェクトにおける共有モジュールの実装の詳細な説明

<<:  MySQL5.7.21 解凍版インストール詳細チュートリアル図

>>:  Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

推薦する

ページ内の検索エンジンの呼び出しはBaiduを例に挙げています

今日、突然、自分のウェブページで Google や Baidu のような強力な検索エンジンを呼び出す...

JavaScript におけるブラウザ互換性の問題について簡単に説明します

ブラウザの互換性は、実際の開発では見落とされがちな最も重要な部分です。古いバージョンのブラウザの互換...

アプレットにおけるwx.getUserProfileインターフェースの具体的な使用

最近、WeChatミニプログラムは、監査ミニプログラムのwx.loginおよびwx.getUserI...

Mysql マスタースレーブ サービスの実装例を構成する

Mysql マスタースレーブ サービスの実装例を構成する### メインデータベースmy.cnfを構成...

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

MySQL 5.7.16 のインストールと設定方法のグラフィック チュートリアル (Ubuntu 16.04)

Ubuntu 16.04 に MySQL 5.7 をインストールするにはどうすればいいですか?メイ...

Linux の MySQL でリモート接続を承認する方法

注意: 他のマシン (IP) は、承認なしではクライアント経由で MySQL データベースに接続でき...

MySQLインスタンスを安全にシャットダウンする方法

この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安全か...

IE6はmin-widthを実装している

まず第一に、この効果は古い話題であるはずだということはわかっています。今日ファイルを整理していたら、...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

vue+rem カスタムカルーセル効果

vue+remを使用したカスタムカルーセルチャートの実装は参考までに。具体的な内容は以下のとおりです...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...

React.Childrenの詳しい使い方

目次1. React.Children.map 2. React.Children.forEach ...