Pembelajaran sudut bercakap tentang arahan dan saluran paip-tutorial js-php.cn

Pembelajaran sudut bercakap tentang arahan dan saluran paip

青灯夜游

Lepaskan： 2022-05-17 11:01:57

ke hadapan

1586 orang telah melayarinya

Artikel ini akan membawa anda melalui Arahan dan Paip dalam sudut, dan memperkenalkan secara ringkas mata pengetahuan yang berkaitan: arahan terbina dalam dan arahan tersuai, paip terbina dalam dan paip tersuai, Semoga ia membantu semua orang !

Pembelajaran sudut bercakap tentang arahan dan saluran paip

Arahan Arahan

arahan ialah cara 操作 DOM yang disediakan oleh Angular. Arahan dibahagikan kepada 属性指令 dan 结构指令.

Arahan atribut: Ubah suai rupa atau gelagat elemen sedia ada, dibalut dengan [].
Arahan struktur: tambah dan padam nod DOM untuk mengubah suai reka letak, gunakan * sebagai awalan arahan. [Cadangan tutorial berkaitan: "tutorial sudut"]

1. Arahan terbina dalam

1.1 *ngIf

Berdasarkan bersyarat 渲染 nod DOM atau 移除 nod DOM.

<div *ngIf="data.length == 0">没有更多数据</div>

Salin selepas log masuk

<div *ngIf="data.length > 0; then dataList else noData"></div>
<ng-template #dataList>课程列表</ng-template>
<ng-template #noData>没有更多数据</ng-template>

Salin selepas log masuk

ng-template digunakan untuk menentukan templat Selepas menggunakan ng-template untuk menentukan templat, anda boleh menggunakan arahan ng-container dan templateOutlet untuk menggunakannya.

<ng-template #loading>
 <button (click)="login()">login</button>
 <button (click)="sigup()">sigup</button>
</ng-template>
<ng-container *ngTemplateOutlet="loading">
</ng-container>

Salin selepas log masuk

1.2 [hidden]

Berdasarkan 显示 nod DOM bersyarat atau 隐藏 nod DOM (paparan).

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

Salin selepas log masuk

1.3 *ngFor

Lintas data untuk menjana struktur HTML

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

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

Salin selepas log masuk

<li
    *ngFor="
      let item of list;
      let i = index;
      let isEven = even;
      let isOdd = odd;
      let isFirst = first;
      let isLast = last;
    "
  >
  </li>

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

2. Arahan tersuai

Keperluan: Tetapkan warna latar belakang lalai untuk elemen, warna latar belakang apabila tetikus bergerak masuk dan warna latar belakang apabila tetikus bergerak keluar.

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

Salin selepas log masuk

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

Salin selepas log masuk

Paip Paip

Fungsi paip ialah 格式化组件模板数据.

1. Saluran paip terbina dalam

pemformatan tarikh tarikh
pemformatan mata wang
huruf besar ditukar kepada huruf besar
huruf kecil ditukar kepada huruf kecil
Data json diformatkan json

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

Salin selepas log masuk

2 Saluran paip tersuai

Keperluan: Rentetan yang dinyatakan tidak boleh. melebihi peraturan Tempoh

<!-- 这是一... -->
{{&#39;这是一个测试&#39; | summary: 3}}

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Pembelajaran sudut bercakap tentang arahan dan saluran paip. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!