Angular のディレクティブ、パイプ、サービスの詳細な分析

Angular の命令、パイプ、サービスとは何ですか?次の記事では、Angular の手順、パイプライン、サービスについて説明します。お役に立てば幸いです。

1. ディレクティブディレクティブ

ディレクティブは、Angular によって提供される操作です。 DOM パス。命令は属性命令と構造命令に分かれます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

属性の説明: 既存の要素の外観または動作を変更し、[] パッケージを使用します。

構造命令: レイアウトを変更するには、DOM ノードを追加および削除します。命令プレフィックスとして # を使用します。

#1.1 ビルド済み-in 命令

1.1.1 *ngIf

条件に基づいたレンダリングDOM ノードまたは削除 DOM Node

<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>

1.1.2 [hidden]

に従って表示条件 DOM ノードまたは非表示DOM ノード(display)

<div [hidden]="data.length === 0">没有更多数据</div>

1.1.3 *ngFor

データを走査して HTML 構造を生成する

interface List {
  id: number
  name: string
  age: number
}

list: List[] = [
  { id: 1, name: "张三", age: 20 },
  { id: 2, name: "李四", age: 30 }
]

<!--  
    i: 索引
    isEven: 是否为偶数行
    isOdd: 是否为奇数行
    isFirst: 是否是第一项
    isLast: 是否是最后一项
-->
<li
    *ngFor="
      let item of list; 
      let i = index;
      let isEven = even;
      let isOdd = odd;
      let isFirst = first;
      let isLast = last;
    "
></li>

<li *ngFor="let item of list; trackBy: identify"></li>

identify(index, item){
  return item.id; 
}

1.2 カスタム手順

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

<div [appHover]="{ bgColor: &#39;skyblue&#39; }">Hello Angular</div>

• カスタム命令の作成

$ ng g d appHover
# 全称 ng generate directive

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

// 接收参的数类型
interface Options {
  bgColor?: string
}

@Directive({
  selector: "[appHover]"
})
export class HoverDirective implements AfterViewInit {
  // 接收参数
  @Input("appHover") appHover: Options = {}
  // 要操作的 DOM 节点
  element: HTMLElement
  // 获取要操作的 DOM 节点
  constructor(private elementRef: ElementRef) {
    this.element = this.elementRef.nativeElement
  }
  // 组件模板初始完成后设置元素的背景颜色
  ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor || "skyblue"
  }
  // 为元素添加鼠标移入事件
  @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "pink"
  }
  // 为元素添加鼠标移出事件
  @HostListener("mouseleave") leave() {
    this.element.style.backgroundColor = "skyblue"
  }
}

---

2. パイプラインPipe

##パイプの役割は、コンポーネント テンプレート データをフォーマットすることです。

#2.1 組み込みパイプライン

##date
• 日付の書式設定

#currency
• 通貨の書式設定

uppercase
• 大文字に変換

# lowercase
• 小文字に変換
  #json
形式
• json

  データ<pre class="brush:html;toolbar:false;">&lt;p&gt;{{ date | date: &quot;yyyy-MM-dd&quot; }}&lt;/p&gt;</pre>

2.2 カスタム パイプライン

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

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

@Pipe({
   name: 'summary' 
});
export class SummaryPipe implements PipeTransform {
    transform (value: string, limit?: number) {
        if (!value) return null;
        let actualLimit = (limit) ? limit : 10;
        return value.substr(0, actualLimit) + '...';
    }
}

// app.module.ts
import { SummaryPipe } from './summary.pipe'
@NgModule({
    declarations: [SummaryPipe] 
});

3. Service

Service

3.1 サービスの作成

$ ng g s services/TestService --skip-tests

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TestService { }

export class AppComponent {
  constructor (private testService: TestService) {}
}

3.2 サービスの範囲サービスを使用すると、クロスモジュールを簡単に実現できますサービスの範囲に応じて、コンポーネント間でデータを共有します。

サービスをルート インジェクターに登録します。すべてのモジュールが同じサービス インスタンス オブジェクトを使用します

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})

export class CarListService {
}

• サービスをモジュール レベルで登録します。このモジュール すべてのコンポーネントは同じサービス インスタンス オブジェクトを使用します

  import { Injectable } from '@angular/core';
  import { CarModule } from './car.module';
  
  @Injectable({
    providedIn: CarModule,
  })
  
  export class CarListService {
  }

  import { CarListService } from './car-list.service';
  
  @NgModule({
    providers: [CarListService],
  })
  export class CarModule {
  }

• #コンポーネント レベルでサービスを登録するには、コンポーネントとそのサブコンポーネントは同じサービス インスタンス オブジェクトを使用します

  import { Component } from '@angular/core';
  import { CarListService } from '../car-list.service.ts'
  
  @Component({
    selector:    'app-car-list',
    templateUrl: './car-list.component.html',
    providers:  [ CarListService ]
  })

• 元のアドレス: https://juejin.cn/post/7008357218210807838

著者: Qianyi_0810

プログラミング関連の知識については、こちらをご覧ください。 :

プログラミングビデオ

! ！

以上がAngular のディレクティブ、パイプ、サービスの詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。