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"]
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.
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:
Pernyataan bersyarat harus true atau false .
{{pekerja.nama}}
Untuk menggunakan arahan struktural, kita perlu menambahkan elemen dengan arahan di template Mari tambahkan beberapa kode Isi file Kami menggunakan Direktif Kode Selamat pagi, klik tombol untuk melihat Hari ini adalah hari Senin dan ini adalah elemen teks tiruan untuk membuat Anda merasa lebih baik Memahami direktif ngIf dengan klausa else Kami menggunakan direktif File Penerjemah menambahkan: Perintah ini sangat berguna dalam pengembangan sebenarnya Kami menggunakan cangkir Sayuran Celana Belanja Saya Dalam Kami memiliki variabel Jika nilai kondisinya Jika Anda ingin menambah atau menghapus elemen dari Aturan terbaiknya adalah: ketika kita berpikir untuk memanipulasi DOM, inilah saatnya menggunakan arahan struktural . Arahan struktural adalah bagian penting dari Saya berharap melalui artikel ini, pembaca dapat lebih memahami cara menggunakan petunjuk ini dan kapan harus menggunakan mode tersebut.Angular menghasilkan elemen *ngIf . Ini mengubahnya menjadi pengikatan properti dalam tanda kurung siku [] , seperti [ngIf] . sisanya, termasuk nama kelas, dimasukkan ke dalam
{{pekerja.nama}}
Bagaimana cara kerja arahan struktural Angular?
HTML . Kemudian tambahkan, hapus atau ganti elemen berdasarkan kondisi atau ekspresi yang kita atur dalam arahan. Contoh arahan struktural
HTML sederhana.app.component.html adalah sebagai berikut:
Selamat datang
Cara menggunakan direktif
*ngIf*ngIf untuk menentukan apakah akan menampilkan atau menghapus elemen berdasarkan kondisi. ngIf sangat mirip dengan if-else .*ngIf menghapus elemen HTML ketika ekspresi bernilai false . Jika true , salinan elemen akan ditambahkan ke DOM .*ngIf lengkapnya adalah sebagai berikut:
Halo
Cara menggunakan direktif
*ngFor*ngFor untuk melakukan iterasi pada array. Misalnya:
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
*ngSwitchngSwitch untuk memutuskan elemen mana yang akan dirender berdasarkan pernyataan kondisional yang berbeda. Direktif *ngSwitch sangat mirip dengan pernyataan switch yang kita gunakan. Misalnya:
typescript : Belanja saya: string = '';
MyShopping yang memiliki nilai default dan digunakan untuk merender elemen tertentu dalam modul yang memenuhi ketentuan.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?
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. Meringkaskan
Angular dan kita dapat menggunakannya dalam banyak cara.