|
|
Diposting pada 25/10/2018 15.52.29
|
|
|
Pengantar Perintah RouterLink
Perintah RouterLink memungkinkan Anda menautkan ke bagian tertentu dari aplikasi Anda. Jika tautan statis, kita dapat menggunakan perintah dengan cara berikut:
Jika Anda perlu membuat alamat tautan dengan nilai dinamis, Anda dapat meneruskan array segmen jalur dan kemudian parameter untuk setiap segmen. Misalnya, menggunakan array ['/team', teamId, 'user', userName, {details: true}] berarti kita ingin membuat tautan ke /team/11/user/bob; detail=true 。
Beberapa segmen statis dapat digabungkan menjadi satu, misalnya ['/team/11/user', userName, {details: true}].
Fragmen jalur pertama dapat didefinisikan sebagai /, ./, atau . / Awal:
- Jika dimulai dengan /, rute akan mulai melihat ke atas dari rute root
- Jika dimulai dengan ./ atau tidak digunakan, rute akan mulai mencari dari rute turunan yang saat ini aktif untuk rute tersebut
- Jika Anda mulai dengan: / dimulai, rute menuju ke tingkat pencarian berikutnya
Anda dapat mengatur parameter dan fragmen kueri dengan cara berikut:
Perintah RouterLink akan menghasilkan tautan berikut berdasarkan parameter input yang ditetapkan di atas: /user/bob#education?debug=true. Selain itu, kita dapat mendeklarasikan cara menangani parameter kueri melalui properti queryParamsHandlening, opsi yang tersedia adalah:
- merge - Gabungkan queryParams yang ada ke dalam queryParams saat ini
- preserve - Simpan queryParams saat ini
- default ('') - Hanya menggunakan parameter kueri
Contoh penggunaan spesifik adalah sebagai berikut:
Perintah RouterLink dijelaskan secara rinci
Definisi perintah RouterLink
Properti input perintah RouterLink
Menetapkan parameter kueri yang terkait dengan URL
@Input() queryParams: {[k: string]: any};
Mengatur fragmen hash pada URL
@Input() fragmen: string;
Atur mode pemrosesan parameter kueri: gabungkan, pertahankan, dan default
@Input() queryParamsHandling: QueryParamsHandling;
Mengatur apakah akan menyimpan fragmen
@Input() preserveFragment: boolean;
Saat mengatur navigasi halaman, apakah akan menambahkan status baru ke riwayat
@Input() skiplocatio{filter}nChange: boolean;
Saat mengatur navigasi halaman, apakah akan mengganti status saat ini dalam riwayat
@Input() replaceUrl: boolean;
Atur informasi parameter perintah, misalnya: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (perintah != null) {
this.commands = Array.isArray(perintah) ? perintah : [perintah];
} else {
this.commands = [];
}
}
Pengikatan perintah RouterLink
Pengikatan peristiwa
Kelas RouterLink
@Attribute()
@Attribute('attributeName') dekorator: Digunakan untuk mendapatkan nilai atribut yang sesuai dengan nama atribut attributeName pada elemen host perintah.
tabindex
Properti tabindex menentukan urutan kontrol tombol tab elemen (saat tombol tab digunakan untuk navigasi).
Elemen berikut mendukung atribut tabindex: <a>, <area>, <button>, <input><object><select> dan <textarea> .
sintaks tabindex:
Kelas RouterLink
Kelas RouterLink
Perintah RouterLinkWithHref
Direktif RouterLinkWithHref
Properti input direktif RouterLinkWithHref
Perintah RouterLinkWithHref
pengikatan atribut
<a> Tag menentukan hyperlink yang digunakan untuk menautkan dari satu halaman ke halaman lainnya. <a> Ada dua atribut penting dalam tag:
href - menentukan alamat URL halaman yang dituju tautan. Jika Anda tidak menggunakan atribut href, Anda tidak dapat menggunakan atribut berikut: unduhan, media, rel, target, dan atribut jenis.
target - menentukan bagaimana halaman tertaut terbuka di jendela browser, dan nilai parameternya terutama sebagai berikut:
_blank - Muat dokumen target di jendela browser baru.
_parent - Sasaran ini menyebabkan dokumen dimuat ke jendela induk atau kumpulan bingkai yang berisi bingkai yang direferensikan oleh hyperlink. Jika referensi ini ada di jendela atau dalam kerangka kerja tingkat atas, maka itu setara dengan _self target.
_self - Nilai target ini adalah target default untuk semua label yang tidak menentukan target <a> , yang menyebabkan dokumen target dimuat dan ditampilkan sebagai dokumen sumber dalam bingkai atau jendela yang sama. Target ini berlebihan dan tidak perlu kecuali <base> digunakan dengan atribut target di tab judul dokumen.
_top - Sasaran ini menyebabkan dokumen memuat jendela yang berisi hyperlink, dan menggunakan target _top akan menghapus semua bingkai yang disertakan dan memuat dokumen di seluruh jendela browser.
Pengikatan peristiwa
MouseEvent mewakili peristiwa yang terjadi saat pengguna berinteraksi dengan perangkat penunjuk (seperti mouse), dan peristiwa umum meliputi: peristiwa klik, dblclick, mouseup, dan mousedown. Objek MouseEvent berisi atribut tombol yang mewakili tombol mouse yang ditekan oleh pengguna, dan nilai atribut yang mungkin adalah sebagai berikut:
- 0 - Tombol utama ditekan, biasanya mengacu pada tombol kiri mouse.
- 1 - Tombol tambahan ditekan, biasanya mengacu pada roda mouse.
- 2 - Tombol kedua ditekan, biasanya mengacu pada tombol kanan mouse.
- 3 - Tombol keempat ditekan, biasanya mengacu pada tombol kembali browser.
- 4 - Tombol kelima ditekan, biasanya mengacu pada tombol maju browser.
Untuk mouse yang dikonfigurasi untuk penggunaan kidal, penekanan tombol akan menjadi sebaliknya. Dalam hal ini, nilainya dibaca dari kanan ke kiri. Dalam contoh kode di atas, kita juga mengakses properti ctrlKey dan metaKey dari objek MouseEvent, yang berisi properti altKey dan shiftKey selain kedua properti ini. Atribut-atribut ini dijelaskan di bawah ini:
- MouseEvent.ctrlKey - mengembalikan true jika tombol kontrol ditekan saat peristiwa mouse dipicu.
- MouseEvent.metaKey - mengembalikan true jika tombol (Window - ⊞, Mac - ⌘ Command) ditekan saat peristiwa mouse dipicu.
- MouseEvent.altKey - Mengembalikan true saat peristiwa mouse dipicu jika tombol (Window - alt, Mac - Option, atau ⌥ ) ditekan.
- MouseEvent.shiftKey - Mengembalikan true jika tombol shift ditekan saat peristiwa mouse dipicu.
Jika Anda menekan ctrlKey lalu mengklik tab, <a> halaman tab baru akan dibuat menggunakan alamat URL saat ini. Jika Anda menekan metaKey dan kemudian mengklik <a> tab, halaman saat ini akan disegarkan. Oleh karena itu, dalam metode onClick(), penilaian yang sesuai dilakukan.
Siklus hidup perintah RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Kelas RouterLinkWithHref
Kelas RouterLinkWithHref
Kelas RouterLinkWithHref
Pengantar perintah RouterLinkActive
Direktif RouterLinkActive memungkinkan Anda menambahkan kelas CSS ke elemen saat rute tertaut menjadi aktif. Lihatlah contoh berikut:
Jika alamat URL adalah /user atau /user/bob, kelas active-link akan ditambahkan <a> ke tag. Jika URL berubah, class active-link akan otomatis dihapus dari <a> tag. Anda juga dapat menambahkan beberapa kelas sekaligus, sebagai berikut:
Saat menerapkan perintah routerLinkActive, Anda juga dapat menggunakan parameter routerLinkActiveOptions untuk mengonfigurasi bagaimana URL dicocokkan, sebagai berikut:
Saat parameter {exact: true} dikonfigurasi, kelas active-link hanya ditambahkan ke tag jika alamat URL sama persis <a> dengan . Anda juga dapat menetapkan instance RouterLinkActive ke variabel templat dan memeriksa status isActive dari arahan perintah secara direktif:
Terakhir, Anda juga dapat menerapkan perintah RouterLinkActive ke elemen induk RouterLink. Contohnya meliputi:
Dalam contoh di atas, ketika URL dialamatkan sebagai /user/jim atau /user/bob, kelas active-link ditambahkan <div> ke elemen yang sesuai.
Perintah RouterLinkActive dijelaskan secara rinci
Definisi perintah RouterLinkActive
Properti input perintah RouterLinkActive
Siklus hidup perintah RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Kelas RouterLinkActive
Kelas RouterLinkActive
Kelas RouterLinkActive
|
Mantan:Ada fungsi di sini yang sangat bagus, Anda bisa menghasilkan uang, itu adalah promosi.Depan:Merilis plugin bebas kontrak pembayaran online DZ, yang tersedia untuk pengujian pribadi.
|
