Bagaimana cara menggunakan arahan struktural di Angular?

Artikel ini akan membawa Anda mempelajari pola direktif struktural di Angular, memperkenalkan apa itu direktif struktural dan bagaimana menggunakannya, semoga bermanfaat bagi Anda!

Entri front-end (vue) ke kursus penguasaan: masuk ke pembelajaran

Di Angular , ada dua jenis arahan. Arahan atribut mengubah tampilan atau perilaku elemen DOM . Arahan struktural menambah atau menghapus elemen DOM .

Arahan struktural adalah salah satu fitur terkuat di Angular , namun sering disalahpahami.

Jika Anda tertarik untuk mempelajari tentang arahan struktur, mari baca terus dan cari tahu apa itu arahan struktur, kegunaannya, dan cara menggunakannya dalam proyek Anda. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]

apa yang akan kamu pelajari

Pada artikel ini, Anda akan mempelajari tentang pola arahan struktural Angular . Anda akan mengetahui apa itu dan bagaimana menggunakannya.

Setelah mempelajari artikel ini, Anda akan lebih memahami petunjuk ini dan menggunakannya dalam proyek sebenarnya.

Apa arahan struktural Angular?

Arahan struktural Angular adalah arahan yang dapat mengubah struktur DOM . Petunjuk ini dapat添加、移除或者替换元素. Direktif struktural mempunyai simbol * di depan namanya.

Di Angular , ada tiga arahan terstruktur standar.

• *ngIf - Menyertakan template secara kondisional berdasarkan nilai Boolean yang dikembalikan oleh ekspresi (yaitu rendering template bersyarat)

• *ngFor - mengulangi array

• *ngSwitch - Merender setiap grafik yang cocok

Di bawah ini adalah contoh arahan terstruktur. Sintaksnya terlihat seperti ini:

 <element ng-if="Kondisi"></elemen>

Pernyataan bersyarat harus true atau false .

 <div *ngIf="pekerja" class="nama">{{pekerja.nama}}</div>

Angular menghasilkan elemen <ng-template> dan kemudian menerapkan direktif *ngIf . Ini mengubahnya menjadi pengikatan properti dalam tanda kurung siku [] , seperti [ngIf] . <div> sisanya, termasuk nama kelas, dimasukkan ke dalam <ng-template> . Misalnya:

 <ng-template [ngIf]="pekerja">
<div class="name">{{pekerja.nama}}</div>
</ng-templat>

Bagaimana cara kerja arahan struktural Angular?

Untuk menggunakan arahan struktural, kita perlu menambahkan elemen dengan arahan di template HTML . Kemudian tambahkan, hapus atau ganti elemen berdasarkan kondisi atau ekspresi yang kita atur dalam arahan.

Contoh arahan struktural

Mari tambahkan beberapa kode HTML sederhana.

Isi file app.component.html adalah sebagai berikut:

 <div style="text-align:center">
<h1>
Selamat datang
</h1>
</div>
<h2> <ilustrasi-aplikasi></ilustrasi-aplikasi></h2>

Cara menggunakan direktif *ngIf

Kami menggunakan *ngIf untuk menentukan apakah akan menampilkan atau menghapus elemen berdasarkan kondisi. ngIf sangat mirip dengan if-else .

Direktif *ngIf menghapus elemen HTML ketika ekspresi bernilai false . Jika true , salinan elemen akan ditambahkan ke DOM .

Kode *ngIf lengkapnya adalah sebagai berikut:

 <h1>
	<button (click)="toggleOn =!toggleOn">ilustrasi ng-if</button>
</h1>
<div *ngIf="!toggleOn">
<h2>Halo </h2>
<p>Selamat pagi, klik tombol untuk melihat</p>
</div>
<jam>
<p>Hari ini adalah hari Senin dan ini adalah elemen teks tiruan untuk membuat Anda merasa lebih baik</p>
<p>Memahami direktif ngIf dengan klausa else</p>

Cara menggunakan direktif *ngFor

Kami menggunakan direktif *ngFor untuk melakukan iterasi pada array. Misalnya:

 <ul>

<li *ngFor="biarkan wajan pekerja">{{ wajan }}</li>

</ul>

File TypeScript komponen kami:

 impor { Komponen, OnInit } dari '@angular/core';

@Komponen({
pemilih: 'ilustrasi aplikasi',
templateUrl: './illustrations.component.html',
styleUrls: ['./illustrations.component.css']
})
kelas ekspor IllustrationsComponent mengimplementasikan OnInit {
pekerja: apa saja = [

'pekerja 1',

'pekerja 2',

'pekerja 3',

'pekerja 4',

'pekerja 5',

]

konstruktor() {} }

ngOnInit(): batal {
}

}

Cara menggunakan direktif *ngSwitch

Penerjemah menambahkan: Perintah ini sangat berguna dalam pengembangan sebenarnya

Kami menggunakan ngSwitch untuk memutuskan elemen mana yang akan dirender berdasarkan pernyataan kondisional yang berbeda. Direktif *ngSwitch sangat mirip dengan pernyataan switch yang kita gunakan. Misalnya:

 <div [ngSwitch]="Belanja Saya">
<p *ngSwitchCase="'cups'">cangkir</p>
<p *ngSwitchCase="'veg'">Sayuran</p>
<p *ngSwitchCase="'clothes'">Celana</p>
<p *ngSwitchDefault>Belanja Saya</p>
</div>

Dalam typescript :

 Belanja saya: string = '';

Kami memiliki variabel MyShopping yang memiliki nilai default dan digunakan untuk merender elemen tertentu dalam modul yang memenuhi ketentuan.

Jika nilai kondisinya true , elemen yang relevan akan dirender ke dalam DOM , dan elemen lainnya akan diabaikan. Jika tidak ada elemen yang cocok, elemen *ngSwitchDefault dirender ke dalam DOM .

Kapan kita perlu menggunakan arahan struktural di Angular?

Jika Anda ingin menambah atau menghapus elemen dari DOM , Anda harus menggunakan arahan struktur. Tentu saja, kita juga dapat menggunakannya untuk mengubah gaya elemen CSS , atau menambahkan pendengar acara. Anda bahkan dapat menggunakannya untuk membuat elemen baru yang belum pernah ada sebelumnya.

Aturan terbaiknya adalah: ketika kita berpikir untuk memanipulasi DOM, inilah saatnya menggunakan arahan struktural .

Meringkaskan

Arahan struktural adalah bagian penting dari Angular dan kita dapat menggunakannya dalam banyak cara.

Saya berharap melalui artikel ini, pembaca dapat lebih memahami cara menggunakan petunjuk ini dan kapan harus menggunakan mode tersebut.