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 をインストールし、環境変数を設定する方法の詳細な説明

推薦する

sysbenchツールによるMySQLデータベースのパフォーマンステストの実装方法

1. 背景Sysbench は、システムのハードウェア パフォーマンスをテストできるストレス テスト...

Vue ベースの要素ボタン権限実装ソリューション

背景要件: ERP システムに「ボタン権限制御」機能を追加する必要があり、権限の制御粒度をボタン レ...

MySQL の時間保持問題に関する簡単な分析

MySQL のデフォルトの時間タイプ (datetime と timestamp) の精度は秒です。...

MySQL 5.7.18 のインストール中に MySQL サービスの起動に失敗する問題の解決策

MySQL は非常に強力なリレーショナル データベースです。しかし、初心者の中には、インストールや設...

phpstudy から Linux への MySQL の移行に関するチュートリアル

プロジェクトの目的元のWindows環境でphpstudyを使用して構築されたMySQL 5.5.5...

3つの簡単な例を使ってハイパーリンクの下線を削除する方法

ハイパーリンクの下線を削除するには、スタイルシート CSS を使用する必要があります。当面は CSS...

MySQL パラメータ関連の概念とクエリ変更方法

序文:以前の記事では、特定のパラメータの機能についてよく紹介してきました。しかし、MySQL パラメ...

HTML での一般的なリダイレクト接続の例コード

コードをコピーコードは次のとおりです。 window.location.href="zcb...

JSパッケージオブジェクトに関する簡単な説明

目次概要意味インスタンスメソッドプリミティブ型とインスタンスオブジェクト間の自動変換カスタムメソッド...

Dockerがプライベート倉庫Harborを構築する手順

港Harborは、エンタープライズレベルのプライベートDockerイメージリポジトリを構築するための...

LeetCode の SQL 実装 (178. スコアランキング)

[LeetCode] 178.ランクスコアスコアをランク付けする SQL クエリを記述します。2 ...

1行のコードでLinuxのプロセスを隠す方法を学ぶ

友人たちはいつも、Linux のプロセスを隠す方法を私に尋ねます。私は、どの程度隠したいのか、カーネ...

TypeScript の関数

目次1. 関数の定義1.1 JavaScript の関数1.2 TypeScriptの関数2. オプ...

NodeJSとブラウザにおけるこのキーワードの違い

序文JavaScript を学習した人なら誰でも、さまざまな環境で this がどこを指すかという問...

HTML印刷関連の操作と実装の詳細な説明

原則的にはwindow.print()メソッドを呼び出すことですが、このメソッドは現在のページ全体を...