Angular 学習で命令とパイプラインについて語る

著者：Eve Cole 更新時間：2022-06-11 09:03:14

この記事では、Angular のディレクティブとパイプを理解し、関連する知識ポイント (組み込み命令とカスタム命令、組み込みパイプとカスタムパイプ) を簡単に紹介します。お役に立てば幸いです。

指令

ディレクティブは、操作DOM Angular によって提供される方法です。命令は属性指令と结构指令に分かれます。

属性ディレクティブ: 既存の要素の外観または動作を変更し、 []で囲みます。
構造命令: DOM ノードを追加および削除してレイアウトを変更します。命令の接頭辞として*使用します。 [推奨関連チュートリアル:「angular チュートリアル」]

1. 組み込み命令

1.1 *ngIf 、

条件に基づいて DOM ノード渲染または DOM ノードを移除。

<div *ngIf="data.length == 0">データはもうありません</div>

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>コースリスト</ng-template>
<ng-template #noData>これ以上データはありません</ng-template>

ng-template ng-template使用してテンプレートを定義した後、 ng-containerおよびtemplateOutlet命令を使用してテンプレートを使用できます。

<ng-template #loading>
 <button (click)="login()">ログイン</button>
 <button (click)="sigup()">サインアップ</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">
</ng-container>

1.2 [hidden]

条件に応じてDOMノードを显示、またはDOMノードを隐藏。

<div [hidden]="data.length == 0">コースリスト</div>
<div [hidden]="data.length > 0">データはもうありません</div>

1.3 *ngFor

データを走査して HTML 構造

インターフェイスを生成します。 List {
  ID:番号
  名前: 文字列
  年齢: 数字
}

リスト: リスト[] = [
  { id: 1、名前: "張三"、年齢: 20 }、
  { id: 2、名前: "李思"、年齢: 30 }
]

<リ
    *ngFor=
      リストの項目を許可します。
      i = インデックス;
      偶数 = 偶数にしましょう。
      isOdd = 奇数にしましょう。
      isFirst = 最初にしましょう。
      isLast = 最後にしましょう。
    」
  >
  </li>

<li *ngFor="リストの項目を許可; trackBy: 識別"></li>

識別(インデックス, 項目){
  item.id を返します。 
2.

カスタムコマンドの

要件: 要素のデフォルトの背景色、マウスが移動したときの背景色、およびマウスが移動したときの背景色を設定します。

<div [appHover]="{ bgColor: 'skyblue' }">Hello Angular</div>

import { AfterViewInit, Directive, ElementRef, HostListener, Input } from "@angular/core"

// 受信パラメータ型インターフェース オプション {
  bgColor?: 文字列
}

@指令（{
  セレクター: "[appHover]"
})
エクスポート クラス HoverDirective は AfterViewInit を実装します {
  //パラメータを受け取る @Input("appHover") appHover: Options = {}
  // 操作対象の DOM ノード要素: HTMLElement
	// 操作対象のDOMノードを取得constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
	// コンポーネント テンプレートの最初の完了後に要素の背景色を設定します ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "スカイブルー"
  }
	// マウス移動イベントを要素に追加 @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "ピンク"
  }
	//要素のマウスアウトイベントを追加 @HostListener("mouseleave") Leave() {
    this.element.style.backgroundColor = "スカイブルー"
  }
パイプ

パイプラインの役割は格式化组件模板数据です。

1. 組み込みパイプラインの

日付日付形式
通貨通貨形式
大文字大文字に変換
小文字の
JSON に変換 JSON データの形式

{{ date date: "yyyy-MM-dd" }}

2. カスタムパイプライン

要件: 指定された文字列を超えることはできません指定された長さ

<!-- これは... -->
{{'これはテストです' 概要: 3}}

// summary.pipe.ts
import { Pipe, PipeTransform } から '@angular/core';

@パイプ（{
   名前: 「概要」 
});
エクスポート クラス SummaryPipe は PipeTransform {を実装します。
    変換 (値: 文字列、制限?: 数値) {
        if (!value) が null を返す。
        実際の制限 = (制限) : 50;
        戻り値.substr(0,actualLimit) + '...';
    }
}

// app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
    宣言: [
      サマリーパイプ
    】 
});

Angular 学習で命令とパイプラインについて語る

指令

​