Home-theater-designers
Viena no galvenajām Angular iezīmēm ir direktīvas. Leņķiskās direktīvas ir veids, kā DOM elementiem pievienot uzvedību. Angular nodrošina dažādas iebūvētas direktīvas, un jūs varat arī izveidot pielāgotas direktīvas šajā spēcīgajā sistēmā.
MUO dienas video RITINĀT, LAI TURPINĀTU AR SATURU
Kas ir direktīvas?
Direktīvas ir pielāgoti kodi, ko Angular izmanto, lai mainītu HTML elementa darbību vai izskatu. Varat izmantot direktīvas, lai pievienotu notikumu uztvērējus, mainītu DOM vai rādītu vai paslēptu elementus.
foršas lietas, ko darīt terminālī
Ir divu veidu iebūvētās direktīvas Angular , struktūra un atribūts. Strukturālās direktīvas maina DOM struktūru, savukārt atribūtu direktīvas maina elementa izskatu vai uzvedību. Direktīvas ir spēcīgs veids, kā paplašināt Angular komponentu funkcionalitāti.
Direktīvas priekšrocības
Šeit ir dažas priekšrocības, ko sniedz direktīvu izmantošana Angular:
- Atkārtota izmantošana : varat izmantot direktīvas vairākos komponentos, ietaupot laiku un pūles.
- Paplašināmība : varat paplašināt direktīvas, lai pievienotu jaunas funkcionalitātes, padarot komponentus jaudīgākus.
- Elastīgums : Izmantojot direktīvas, varat dažādos veidos mainīt elementa uzvedību vai izskatu, sniedzot jums lielu elastību, veidojot lietojumprogrammas.
Leņķiskās lietojumprogrammas iestatīšana
Lai iestatītu Angular lietojumprogrammu, instalējiet Angular CLI, terminālī izpildot šādu kodu:
npm install -g @angular/cli
Pēc Angular CLI instalēšanas izveidojiet Angular projektu, izpildot šādu komandu:
ng new custom-directives-app
Palaižot iepriekš minēto komandu, tiks izveidots Angular projekts ar nosaukumu pielāgotas direktīvas lietotne .
Pielāgotas direktīvas izveide
Tagad jums ir Angular projekts un varat sākt veidot pielāgotas direktīvas. Izveidojiet TypeScript failu un definējiet klasi, kas dekorēta ar @Direktīva dekorators.
The @Direktīva dekorators ir TypeScript dekorētājs, ko izmanto, lai izveidotu pielāgotas direktīvas. Tagad izveidojiet a izcelt.direktīva.ts failu mapē src/app direktoriju. Šajā failā jūs izveidosit pielāgotu direktīvu izcelt .
Piemēram:
import { Directive } from "@angular/core";
@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Iepriekš esošais koda bloks importē direktīva dekorators no @angular/core modulis. The @Direktīva dekorators rotā HighlightDirective klasē. Tas uztver objektu kā argumentu ar a atlasītājs īpašums.
Šajā gadījumā jūs iestatāt atlasītājs īpašumu uz [myHighlight] tas nozīmē, ka varat lietot šo direktīvu savām veidnēm, pievienojot myHighlight atribūts elementam.
Šeit ir piemērs, kā izmantot direktīvu savās veidnēs:
<main>
<p myHighlight>Some text</p>
</main>
Uzvedības pievienošana direktīvai
Tagad esat veiksmīgi izveidojis direktīvu. Nākamais solis ir pievienot direktīvai uzvedību, lai tā varētu manipulēt ar DOM. Jums būs nepieciešams ElementRef no @angular/core, lai pievienotu direktīvai uzvedību.
Jūs ievadīsit ElementRef direktīvas konstruktorā. ElementRef ir iesaiņojums ap sākotnējo elementu skatā.
Tālāk ir sniegts piemērs tam, kā direktīvai pievienot darbību.
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
}
}
Šajā piemērā konstruktors HighlightDirective klase ņem ElementRef parametru, ko Angular automātiski ievada. ElementRef nodrošina piekļuvi pamatā esošajam DOM elementam.
ārējais cietais disks nav konstatēts operētājsistēmā Windows 7
Izmantojot this.element.nativeElement īpašumu, jūs piekļūstat vietējam DOM elementam elements parametrs. Pēc tam iestatiet komponenta fona krāsu uz gaiši zils izmantojot stils īpašums. Tas nozīmē, ka neatkarīgi no tā, kādu elementu izmantojat myHighlight direktīvai būs gaiši zils fons.
Lai direktīva būtu funkcionāla, importējiet to un deklarējiet to app.module.ts failu.
Piemēram:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Tagad elementiem varat lietot direktīvu myHighlight jūsu Angular komponentos .
<main>
<p myHighlight>Some text</p>
</main>
Palaidiet lietojumprogrammu izstrādes serverī, lai pārbaudītu, vai direktīva darbojas. To var izdarīt, terminālī izpildot šādu komandu:
ng serve
Pēc komandas palaišanas dodieties uz http://localhost:4200/ savā tīmekļa pārlūkprogrammā, un jūs redzēsit interfeisu, kas izskatās kā tālāk redzamajā attēlā.
Leņķiskās iebūvētās direktīvas pieņem vērtības, lai mainītu elementu izskatu, bet pielāgotās direktīvas myHighlight nav. Varat konfigurēt direktīvu, lai tā pieņemtu vērtību, ko tā izmantos, lai dinamiski iestatītu veidnes fona krāsu.
Lai to izdarītu, nomainiet kodu mapē izcelt.direktīva.ts fails ar šo:
import { Directive, ElementRef, Input } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
Iepriekš esošajā koda blokā HighlightDirective klase satur settera metodi, ko sauc myHighlight . Šī metode aizņem a krāsa tipa virknes parametrs. Jūs izrotāt setera metodi ar @Ievade dekorators, kas ļauj nodot krāsas vērtību direktīvā no vecākkomponenta.
Tagad varat noteikt fona krāsu, nododot vērtību myHighlight direktīvai.
Piemēram:
<main>
<p myHighlight='pink'>Some text</p>
</main>
Pielāgotas strukturālās direktīvas izveide
Iepriekšējās sadaļās jūs uzzinājāt, kā izveidot, pievienot darbības un lietot pielāgotu atribūtu direktīvas savai veidnei. Atribūtu direktīvas maina DOM elementu izskatu, savukārt strukturālās direktīvas pievieno, noņem vai pārvieto elementus DOM.
Angular nodrošina divas strukturālas direktīvas, ngFor un GIF . ngFor direktīva atveido veidni katram kolekcijas vienumam (masīvam), savukārt GIF apstrādā nosacījumu renderēšanu.
Šajā sadaļā jūs izveidosit pielāgotu strukturālu direktīvu, kas darbojas kā GIF direktīva. Lai to izdarītu, izveidojiet a nosacījums.direktīva.ts failu.
bezvadu pele nedarbojas Windows 10
Iekš nosacījums.direktīva.ts failu, ierakstiet šo kodu:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Šis koda bloks ļauj nosacīti renderēt elementus, izmantojot stāvokli direktīvu elementam un nodod Būla vērtību no vecākkomponenta.
Konstruktorā Nosacījumu direktīva klasē, jūs ievadāt gadījumu TemplateRef un ViewContainerRef . TemplateRef apzīmē ar direktīvu saistīto veidni, un ViewContainerRef ir konteiners, kurā lietojumprogramma atveido skatus.
Klases iestatītāja metode ConditionDirective izmanto priekšrakstu if else, lai pārbaudītu parametru arg. Ja parametrs ir patiess, direktīva izveido iegultu skatu, izmantojot sniegto veidni. The CreateEmbeddedView ViewContainerRef klases metode izveido un atveido skatu DOM.
Ja parametrs ir viltus , direktīva notīra skata konteineru, izmantojot skaidrs ViewContainerRef klases metode. Tādējādi no DOM tiek noņemti visi iepriekš renderētie skati.
Pēc direktīvas izveides reģistrējiet to savā projektā, importējot un deklarējot to app.module.ts failu. Pēc šīs darbības varat sākt izmantot direktīvu savās veidnēs.
Šeit ir piemērs, kā to izmantot savās veidnēs:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Tagad varat izveidot pielāgotas direktīvas
Angular pielāgotās direktīvas nodrošina efektīvu veidu, kā manipulēt ar DOM un pievienot veidnēm dinamisku darbību. Jūs esat iemācījies izveidot un lietot pielāgotus atribūtus un strukturālās direktīvas savās Angular lietojumprogrammās. Izprotot, kā izveidot un izmantot pielāgotas direktīvas, varat pilnībā izmantot Angular iespējas.