Home-theater-designers
Viena iš pagrindinių Angular savybių yra direktyvos. Kampinės direktyvos yra būdas pridėti elgseną prie DOM elementų. „Angular“ teikia įvairias integruotas direktyvas, taip pat galite sukurti pasirinktines direktyvas šioje tvirtoje sistemoje.
ar gali ką nors nutildyti instagrameMUO dienos vaizdo įrašas SLĖKITE, KAD TĘSITE SU TURINIU
Kas yra direktyvos?
Direktyvos yra pasirinktiniai kodai, kuriuos „Angular“ naudoja HTML elemento veikimui ar išvaizdai keisti. Galite naudoti direktyvas norėdami pridėti įvykių klausytojų, pakeisti DOM arba rodyti arba slėpti elementus.
Yra dviejų tipų įtaisytosios direktyvos Angular , struktūra ir atributas. Struktūrinės direktyvos keičia DOM struktūrą, o atributų direktyvos pakeičia elemento išvaizdą ar elgesį. Direktyvos yra galingas būdas išplėsti kampinių komponentų funkcionalumą.
Direktyvų privalumai
Štai keletas direktyvų naudojimo „Angular“ pranašumų:
- Pakartotinis naudojimas : galite naudoti direktyvas keliuose komponentuose, sutaupydami laiko ir pastangų.
- Išplečiamumas : galite išplėsti direktyvas, kad pridėtumėte naujų funkcijų, kad jūsų komponentai būtų galingesni.
- Lankstumas : Naudodami direktyvas galite įvairiais būdais keisti elemento elgseną ar išvaizdą, suteikdami daug lankstumo kuriant programas.
Kampinės programos nustatymas
Norėdami nustatyti Angular programą, įdiekite Angular CLI paleisdami šį kodą savo terminale:
npm install -g @angular/cli
Įdiegę Angular CLI, sukurkite kampinį projektą vykdydami šią komandą:
ng new custom-directives-app
Vykdydami aukščiau pateiktą komandą sukursite kampinį projektą pavadinimu Custom-directive-app .
Muitinės direktyvos kūrimas
Dabar turite kampinį projektą ir galite pradėti kurti pasirinktines direktyvas. Sukurkite „TypeScript“ failą ir nustatykite klasę, papuoštą @direktyva dekoratorius.
The @direktyva dekoratorius yra „TypeScript“ dekoratorius, naudojamas kuriant pasirinktines direktyvas. Dabar sukurkite a paryškinti.direktyva.ts failą src/app katalogas. Šiame faile sukursite pasirinktinę direktyvą paryškinti .
Pavyzdžiui:
import { Directive } from "@angular/core";
@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Aukščiau pateiktas kodo blokas importuoja direktyvą dekoratorius iš @kampinis/šerdis modulis. The @direktyva dekoratorius puošia HighlightDirective klasė. Objektą priima kaip argumentą su a parinkiklis nuosavybė.
Šiuo atveju jūs nustatote parinkiklis nuosavybė į [myHighlight] tai reiškia, kad galite taikyti šią direktyvą savo šablonams pridėdami myHighlight atributas elementui.
Štai pavyzdys, kaip naudoti direktyvą savo šablonuose:
<main>
<p myHighlight>Some text</p>
</main>
Elgsenos įtraukimas į direktyvą
Dabar jūs sėkmingai sukūrėte direktyvą. Kitas žingsnis yra pridėti elgseną prie direktyvos, kad ji galėtų manipuliuoti DOM. Jums reikės ElementRef iš @angular/core, kad pridėtumėte elgseną prie direktyvos.
Jūs įvesite ElementRef į direktyvos konstruktorių. ElementRef yra įvyniojimas aplink savąjį elementą rodinio viduje.
Štai pavyzdys, kaip pridėti elgseną prie direktyvos:
import { Directive, ElementRef } from "@angular/core";
@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor = 'lightblue';
}
}
Šiame pavyzdyje konstruktorius HighlightDirective klasė paima ElementRef parametrą, kurį Angular automatiškai įveda. ElementRef suteikia prieigą prie pagrindinio DOM elemento.
Naudojant tai.elementas.gimtojiElementas ypatybę, galite pasiekti savąjį DOM elementą elementas parametras. Tada nustatote komponento fono spalvą šviesiai mėlynas naudojant stilius nuosavybė. Tai reiškia, kad bet kurį elementą taikysite myHighlight direktyva to turės šviesiai mėlyną foną.
Kad direktyva veiktų, įsitikinkite, kad ją importuojate ir deklaruojate app.module.ts failą.
Pavyzdžiui:
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 { }
Dabar elementams galite taikyti myHighlight direktyvą kampiniuose komponentuose .
<main>
<p myHighlight>Some text</p>
</main>
Paleiskite programą kūrimo serveryje, kad patikrintumėte, ar direktyva veikia. Tai galite padaryti paleisdami šią komandą savo terminale:
ng serve
Paleidę komandą, eikite į http://localhost:4200/ žiniatinklio naršyklėje ir pamatysite sąsają, kuri atrodo kaip toliau pateiktame paveikslėlyje.
Įtaisytosios kampinės direktyvos priima reikšmes, kad pakeistų elemento išvaizdą, tačiau pritaikytos direktyvos myHighlight ne. Galite sukonfigūruoti direktyvą, kad ji priimtų reikšmę, kurią ji naudos dinamiškai nustatydama šablono fono spalvą.
Norėdami tai padaryti, pakeiskite kodą paryškinti.direktyva.ts failą su šiuo:
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) {
}
}
Aukščiau esančiame kodo bloke HighlightDirective klasėje yra nustatymo metodas, vadinamas myHighlight . Šis metodas reikalauja a spalva tipo eilutės parametras. Jūs papuošiate seterio metodą su @Įvestis dekoratorius, leidžiantis perduoti spalvos reikšmę į direktyvą iš pirminio komponento.
Dabar galite nustatyti fono spalvą perduodami reikšmę myHighlight direktyvai.
Pavyzdžiui:
<main>
<p myHighlight='pink'>Some text</p>
</main>
Individualios struktūrinės direktyvos kūrimas
Ankstesniuose skyriuose sužinojote, kaip sukurti, pridėti elgseną ir taikyti šablonui pasirinktines atributų direktyvas. Atributų direktyvos pakeičia DOM elementų išvaizdą, o struktūrinės direktyvos prideda, pašalina arba perkelia elementus DOM.
Angular pateikia dvi struktūrines direktyvas, ngFor ir GIF . ngFor direktyva pateikia šabloną kiekvienam kolekcijos (masyvo) elementui, o GIF tvarko sąlyginį atvaizdavimą.
kaip ištrinti įrašą „Facebook“
Šiame skyriuje sukursite pasirinktinę struktūrinę direktyvą, kuri veiks kaip GIF direktyva. Norėdami tai padaryti, sukurkite a sąlyga.direktyva.ts failą.
Viduje sąlyga.direktyva.ts failą, parašykite šį kodą:
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 kodo blokas leidžia sąlygiškai pateikti elementus taikant sąlyga direktyvą elementui ir loginės reikšmės perdavimą iš pirminio komponento.
Konstruktorius Sąlygų direktyva klasėje, įterpiate egzempliorių Šablono nuoroda ir ViewContainerRef . TemplateRef reiškia šabloną, susietą su direktyva, o ViewContainerRef – konteinerį, kuriame programa pateikia rodinius.
„ConditionDirective“ klasių nustatymo metodas naudoja teiginį if else, kad patikrintų arg parametrą. Direktyva sukuria įterptąjį rodinį naudodama pateiktą šabloną, jei parametras yra teisingas. The CreateEmbeddedView ViewContainerRef klasės metodas sukuria ir pateikia vaizdą DOM.
Jei parametras yra klaidinga , direktyva išvalo peržiūros konteinerį naudodama aišku ViewContainerRef klasės metodas. Tai pašalina visus anksčiau pateiktus rodinius iš DOM.
Sukūrę direktyvą, užregistruokite ją savo projekte importuodami ir deklaruodami app.module.ts failą. Tai atlikę galite pradėti naudoti direktyvą savo šablonuose.
Štai pavyzdys, kaip jį naudoti savo šablonuose:
<main>
<p *condition="true">Hello There!!!</p>
</main>
Dabar galite kurti pasirinktines direktyvas
Angular tinkintos direktyvos suteikia galingą būdą manipuliuoti DOM ir pridėti dinamišką jūsų šablonų elgesį. Sužinojote, kaip kurti ir taikyti pasirinktinius atributus ir struktūrines direktyvas savo Angular programose. Suprasdami, kaip kurti ir naudoti pasirinktines direktyvas, galite išnaudoti visas Angular galimybes.