Pembelajaran sudut berbicara tentang instruksi dan saluran pipa

Direktif

Arahan adalah cara yang disediakan oleh Angular操作DOM . Instruksi dibagi menjadi属性指令dan结构指令.

• Arahan atribut: Ubah tampilan atau perilaku elemen yang ada, bungkus dengan [] .

• Instruksi struktural: menambah dan menghapus node DOM untuk mengubah tata letak, gunakan * sebagai awalan instruksi. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]

1. Instruksi bawaan

1.1 *ngIf

渲染node DOM atau移除node DOM berdasarkan kondisi.

<div *ngIf="data.length == 0">Tidak ada data lagi</div>

<div *ngIf="data.length > 0; maka dataList else noData"></div>
<ng-template #dataList>Daftar Kursus</ng-template>
<ng-template #noData>Tidak ada lagi data</ng-template>

ng-template digunakan untuk mendefinisikan template. Setelah menggunakan ng-template untuk mendefinisikan template, Anda dapat menggunakan instruksi ng-container dan templateOutlet untuk menggunakannya.

<ng-templat #memuat>
 <tombol (klik)="login()">masuk</button>
 <button (klik)="sigup()">sigup</button>
</ng-templat>
<ng-container *ngTemplateOutlet="memuat">
</ng-container>

1.2 [hidden]

显示node DOM atau隐藏node DOM (tampilan) sesuai kondisi.

<div [hidden]="data.length == 0">Daftar Kursus</div>
<div [hidden]="data.length > 0">Tidak ada lagi data</div>

1.3 *ngFor

melintasi data untuk menghasilkan

antarmuka struktur HTML Daftar {
  identitas: nomor
  nama: tali
  usia: nomor
}

daftar: Daftar[] = [
  {id: 1, nama: "Zhang San", umur: 20 },
  { ID: 2, Nama: "李思", umur: 30 }
]

<li
    *ngUntuk="
      biarkan item dari daftar;
      misalkan i = indeks;
      misalkan Genap = genap;
      misalkan isOdd = ganjil;
      misalkan isFirst = pertama;
      biarkan isLast = terakhir;
    "
  >
  </li>

<li *ngFor="biarkan item dalam daftar; trackBy: identifikasi"></li>

identifikasi(indeks, item){
  pengembalian barang.id; 
}

2. Persyaratan perintah khusus

: Mengatur warna latar belakang default untuk elemen, warna latar belakang saat mouse bergerak masuk, dan warna latar belakang saat mouse bergerak keluar.

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

impor { AfterViewInit, Directive, ElementRef, HostListener, Input } dari "@angular/core"

// Menerima tipe parameter antarmuka Pilihan {
  bgWarna?: tali
}

@Direktif({
  pemilih: "[appHover]"
})
kelas ekspor HoverDirective mengimplementasikan AfterViewInit {
  //Menerima parameter @Input("appHover") appHover: Opsi = {}
  // Elemen simpul DOM yang akan dioperasikan: HTMLElement
	// Dapatkan node DOM untuk dioperasikan pada konstruktor (private elementRef: ElementRef) {
    ini.elemen = ini.elementRef.nativeElement
  }
	// Menetapkan warna latar belakang elemen setelah penyelesaian awal templat komponen ngAfterViewInit() {
    this.element.style.backgroundColor = this.appHover.bgColor ||.
  }
	// Tambahkan event pergerakan mouse ke elemen @HostListener("mouseenter") enter() {
    this.element.style.backgroundColor = "merah muda"
  }
	//Tambahkan event mouse out untuk elemen @HostListener("mouseleave") cuti() {
    this.element.style.backgroundColor = "biru langit"
  }
}

Pipa

Peran pipeline adalah格式化组件模板数据.

• 1.

• Format

• tanggal

• pipa

• bawaan

format

{{ tanggal | "yyyy-MM-dd" }}

2. Persyaratan pipa khusus

: string yang ditentukan tidak boleh melebihi Panjang yang ditentukan

<!-- Ini adalah... -->
{{'Ini adalah ujian' |. ringkasan: 3}}

// ringkasan.pipe.ts
impor {Pipa, PipeTransform } dari '@angular/core';

@Pipa({
   nama: 'ringkasan' 
});
kelas ekspor SummaryPipe mengimplementasikan PipeTransform {
    transformasi (nilai: string, batas?: angka) {
        jika (!nilai) mengembalikan nol;
        biarkan aktualLimit = (batas) ?batas : 50;
        return value.substr(0, aktualLimit) + '...';
    }
}

// aplikasi.modul.ts
impor { SummaryPipe } dari './summary.pipe'
@NgModule({
    deklarasi: [
      RingkasanPipa
    ] 
});