Pada artikel sebelumnya, kami telah memberikan gambaran umum tentang Angular . Pada bagian instruksi khusus, kami sudah bisa menulisnya, namun dalam skenario sebenarnya, kami masih memerlukan manajemen standar.
Angular adalah versi upgrade dari Angular.js. [Tutorial terkait yang direkomendasikan: "Tutorial Sudut"]
Jadi, dalam artikel ini, kami akan menggunakan Tooltip untuk menjelaskan konten instruksi khusus.
Render online, sebagai berikut:
Struktur direktori
didasarkan pada proyek kode yang diterapkan pada artikel sebelumnya. Jalankan baris perintah:
# Masuk ke folder arahan $ cd arahan #Buat folder tooltip$ tooltip mkdir # Masuk ke folder tooltip $cd tooltip # Buat komponen tooltip $ ng buat tooltip komponen # Buat direktif tooltip $ ng menghasilkan direktif tooltip
Setelah menjalankan baris perintah di atas, Anda akan mendapatkan struktur direktori file app/directive/tooltip sebagai berikut:
tooltip ├── tooltip // komponen tooltip │ ├── user-list.component.html // kerangka halaman │ ├── user-list.component.scss // gaya unik halaman │ ├── spesifikasi user-list.component .ts // File pengujian │ └── user-list.component.ts // file javascript ├── tooltip.directive.spec.ts // File pengujian └── tooltip.directive.ts // File arahan
Baiklah, Ini Saya menempatkan komponen pada level yang sama dengan tooltip , terutama untuk memudahkan pengelolaan. Tentu saja ini berbeda-beda untuk setiap orang, Anda bisa meletakkannya di folder components publik.
Tulis komponen tooltip
dalam file html :
<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div> Dalam file gaya .scss , terdapat:
$black: #000000;
$putih: #ffffff;
$ukuran sisipan: 6 piksel;
$tooltip-bg: transparanisasi($hitam, 0.25); // transparanisasi adalah sintaks dari sass $grid-gutter-width: 30px;
$warna-tubuh-bg: $putih;
$waktu-aplikasi-anim: 200 md;
$app-anim-curve: kemudahan;
$std-batas-radius: 5 piksel;
$zindex-maks: 100;
// :pemilih kelas semu host, menyetel gaya untuk elemen komponen itu sendiri: host {
posisi: tetap;
bantalan: $lebar-selokan-grid/3 $lebar-selokan-grid/2;
warna latar belakang: $tooltip-bg;
warna: $body-bg-color;
opacity: 0;
transisi: semua $app-anim-time $app-anim-curve;
perataan teks: tengah;
radius-perbatasan: $std-radius-perbatasan;
indeks-z: $zindex-max;
}
.caret {// lebar tanda sisipan: 0;
tinggi: 0;
batas kiri: 6px solid transparan;
perbatasan-kanan: 6px solid transparan;
batas bawah: 6px solid $tooltip-bg;
posisi: mutlak;
atas: -$ukuran sisipan;
kiri: 50%;
margin-kiri: -$ukuran sisipan/2;
warna-batas-bawah: $tooltip-bg;
} Hmm~,
cssadalah hal yang ajaib, dan saya akan menyusun artikel untuk menjelaskan konten terkaitsass...
Kemudian, isi file javascript tooltip.component.ts adalah sebagai berikut:
import {
Komponen,
ElementRef, //Elemen menunjuk ke HostBinding,
Di Hancurkan,
DiInit
} dari '@angular/inti';
@Komponen({
selector: 'app-tooltip', // Identifier, menunjukkan apa nama komponen saya, ini app-tooltip
templateUrl: './tooltip.component.html', // Kerangka komponen ini styleUrls: ['./tooltip.component.scss'] // Gaya pribadi komponen ini})
kelas ekspor TooltipComponent mengimplementasikan OnInit {
data publik: apapun; // Tetapkan nilai pada direktif private displayTimeOut: any;
// Dekorator yang berhubungan dengan pengikatan host pada komponen itu sendiri @HostBinding('style.top') hostStyleTop!: string;
@HostBinding('style.left') hostStyleLeft!: string;
@HostBinding('style.opacity') hostStyleOpacity!: string;
konstruktor(
elemen pribadiRef: ElementRef
) {}
ngOnInit(): batal {
this.hostStyleTop = ini.data.elementPosition.bottom + 'px';
if(ini.displayTimeOut) {
clearTimeout(ini.displayTimeOut)
}
this.displayTimeOut = setTimeout((_: apa saja) => {
// Hitung jarak antara tooltip dan sisi kiri di sini. Rumus perhitungannya di sini adalah: tooltip.left + .width elemen target - (tooltip.width/2)
this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth / 2 - this.elementRef.nativeElement.clientWidth / 2 + 'px'
this.hostStyleOpacity = '1';
this.hostStyleTop = ini.data.elementPosition.bottom + 10 + 'px'
}, 500)
}
// Komponen dimusnahkan ngOnDestroy() {
// Setelah komponen dimusnahkan, hapus timer untuk mencegah kebocoran memori if(this.displayTimeOut) {
clearTimeout(ini.displayTimeOut)
}
}
} Menulis instruksi tooltip
adalah fokus artikel ini. Saya akan menandai instruksi spesifik pada kode ~
Isi file yang relevan tooltip.directive.ts adalah sebagai berikut:
import {
ApplicationRef, // Deteksi panggilan global ComponentFactoryResolver, // Membuat objek komponen ComponentRef, // Asosiasi dan panduan instance komponen, menunjuk ke elemen yang dibuat oleh ComponentFactory Directive, ElementRef,
EmbeddedViewRef, // EmbeddedViewRef mewarisi dari ViewRef dan digunakan untuk mewakili elemen UI yang ditentukan dalam elemen templat.
HostListener, // Injektor mendengarkan acara DOM, // Input injeksi ketergantungan
} dari '@angular/inti';
impor { TooltipComponent } dari './tooltip/tooltip.component';
@Direktif({
pemilih: '[appTooltip]'
})
kelas ekspor TooltipDirective {
@Input("appTooltip") appTooltip!: string;
komponenRef pribadi!: ComponentRef<TooltipComponent>;
// Mendapatkan posisi relatif dari elemen target, seperti kiri, kanan, atas, bawah
dapatkan elemenPosition() {
kembalikan this.elementRef.nativeElement.getBoundingClientRect();
}
konstruktor(
elemen yang dilindungiRef: ElementRef,
appRef yang dilindungi: ApplicationRef,
komponenFactoryResolver yang dilindungi: ComponentFactoryResolver,
injektor terlindungi: Injektor
) {}
//Buat keterangan alat
dilindungi createTooltip() {
ini.componentRef = ini.componentFactoryResolver
.resolveComponentFactory(TooltipComponent) // Mengikat komponen tooltip.create(this.injector);
this.componentRef.instance.data = { // Mengikat konten data data: this.appTooltip,
elemen: this.elementRef.nativeElement,
elemenPosition: ini.elementPosition
}
this.appRef.attachView(this.componentRef.hostView); //Tambahkan tampilan const domElem = (this.componentRef.hostView sebagai EmbeddedViewRef<any>).rootNodes[0] sebagai HTMLElement;
dokumen.body.appendChild(domElem);
}
// Hapus keterangan alat
perusakan yang dilindungiTooltip() {
if(ini.componentRef) {
this.appRef.detachView(this.componentRef.hostView); // Hapus tampilan this.componentRef.destroy();
}
}
// Dengarkan gerakan mouse ke @HostListener('mouseover')
DiEnter() {
ini.createTooltip();
}
// Dengarkan gerakan mouse keluar@HostListener('mouseout')
Keluar() {
this.destroyTooltip();
}
} Pada titik ini, 99% fungsi telah selesai. Sekarang kita dapat memanggilnya di halaman.
Di halaman tersebut, kami memanggil
kami untuk menambahkan konten berikut ke user-list.component.html :
<p style="margin-top: 100px;">
<!-- [appTooltip]="'Halo Jimmy'" adalah poin kuncinya-->
<rentang
[appTooltip]="'Halo Jimmy'"
style="margin-left: 200px; lebar: 160px; text-align: center; padding: 20px 0; tampilan: inline-block; border: 1px solid #999;"
>Jimmy</span>
</p> Kita telah mendeklarasikan instruksi TooltipDirective pada app.module.ts , dan kita dapat memanggilnya secara langsung. Efek saat ini adalah sebagai berikut:
tooltip yang kami terapkan ditampilkan di tengah bawah, yang biasanya kami gunakan dalam kerangka kerja, seperti atribut bottom tooltip dalam angular ant design . Untuk atribut lainnya, jika pembaca tertarik, dapat diperluas.
Pada titik ini, kami dapat memelihara file instruksi yang kami tulis dengan baik.