Paano Gumawa ng Mga Custom na Direktiba sa Angular

Paano Gumawa ng Mga Custom na Direktiba sa Angular
Ang mga mambabasang tulad mo ay tumutulong sa pagsuporta sa MUO. Kapag bumili ka gamit ang mga link sa aming site, maaari kaming makakuha ng isang affiliate na komisyon. Magbasa pa.

Ang isa sa mga pangunahing tampok ng Angular ay ang mga direktiba. Ang mga angular na direktiba ay isang paraan para magdagdag ka ng gawi sa mga elemento ng DOM. Nagbibigay ang Angular ng iba't ibang mga built-in na direktiba, at maaari ka ring lumikha ng mga custom na direktiba sa matatag na balangkas na ito.





paano tanggalin ang profile sa netflix
MUO Video ng araw MAG-SCROLL PARA MAGPATULOY SA NILALAMAN

Ano ang Mga Direktiba?

Ang mga direktiba ay mga custom na code na ginagamit ng Angular upang baguhin ang gawi o hitsura ng isang elemento ng HTML. Maaari kang gumamit ng mga direktiba upang magdagdag ng mga tagapakinig ng kaganapan, baguhin ang DOM, o ipakita o itago ang mga elemento.



Mayroong dalawang uri ng built-in na mga direktiba sa Angular , istruktura at katangian. Binabago ng mga istrukturang direktiba ang istruktura ng DOM, habang binabago ng mga direktiba ng katangian ang hitsura o gawi ng isang elemento. Ang mga direktiba ay isang mahusay na paraan upang palawigin ang functionality ng Angular na mga bahagi.





Mga Benepisyo ng Direktiba

Narito ang ilan sa mga pakinabang ng paggamit ng mga direktiba sa Angular:

  • Reusability : Maaari kang gumamit ng mga direktiba sa maraming bahagi, na nakakatipid sa iyo ng oras at pagsisikap.
  • Extensibility : Maaari kang mag-extend ng mga direktiba upang magdagdag ng bagong functionality, na ginagawang mas malakas ang iyong mga bahagi.
  • Kakayahang umangkop : Gamit ang mga direktiba, maaari mong baguhin ang pag-uugali o hitsura ng isang elemento sa iba't ibang paraan, na nagbibigay sa iyo ng maraming flexibility kapag binubuo ang iyong mga application.

Pag-set Up ng Iyong Angular na Application

Upang mag-set up ng isang Angular na application, i-install ang Angular CLI sa pamamagitan ng pagpapatakbo ng sumusunod na code sa iyong terminal:



 npm install -g @angular/cli

Pagkatapos i-install ang Angular CLI, lumikha ng isang Angular na proyekto sa pamamagitan ng pagpapatakbo ng sumusunod na command:

 ng new custom-directives-app

Ang pagpapatakbo ng command sa itaas ay lilikha ng isang Angular na proyekto na pinangalanan custom-directives-app .



Paggawa ng Custom na Direktiba

Ngayon ay mayroon ka nang Angular na proyekto at maaaring magsimulang gumawa ng iyong mga custom na direktiba. Lumikha ng TypeScript file at tukuyin ang isang klase na pinalamutian ng @Direktiba dekorador.

Ang @Direktiba Ang dekorador ay isang TypeScript na dekorador na ginagamit upang lumikha ng mga custom na direktiba. Ngayon lumikha ng a highlight.directive.ts file sa src/app direktoryo. Sa file na ito, gagawa ka ng custom na direktiba highlight .



Halimbawa:

 import { Directive } from "@angular/core"; 
 
@Directive({ 
  selector: "[myHighlight]", 
}) 
export class HighlightDirective { 
  constructor() {} 
}

Ini-import ng block ng code sa itaas ang Direktiba dekorador mula sa @angular/core modyul. Ang @Direktiba pinalamutian ng dekorador ang HighlightDirective klase. Ito ay tumatagal ng isang bagay bilang isang argumento na may a tagapili ari-arian.

Sa kasong ito, itinakda mo ang tagapili ari-arian sa [myHighlight] ibig sabihin maaari mong ilapat ang direktiba na ito sa iyong mga template sa pamamagitan ng pagdaragdag ng myHighlight katangian sa isang elemento.

Narito ang isang halimbawa kung paano gamitin ang direktiba sa iyong mga template:

 <main> 
 <p myHighlight>Some text</p> 
</main>

Pagdaragdag ng Gawi sa Direktiba

Ngayon ay matagumpay kang nakagawa ng isang direktiba. Ang susunod na hakbang ay magdagdag ng gawi sa direktiba upang mamanipula nito ang DOM. Kakailanganin mo ang ElementRef mula sa @angular/core upang magdagdag ng pag-uugali sa isang direktiba.

I-inject mo ang ElementRef sa constructor ng direktiba. Ang ElementRef ay isang wrapper sa paligid ng isang katutubong elemento sa loob ng isang view.

Narito ang isang halimbawa kung paano ka magdagdag ng gawi sa isang direktiba:

 import { Directive, ElementRef } from "@angular/core"; 
 
@Directive({ 
    selector: "[myHighlight]" 
}) 
export class HighlightDirective { 
    constructor(private element: ElementRef) { 
        this.element.nativeElement.style.backgroundColor = 'lightblue'; 
    } 
}

Sa halimbawang ito, ang constructor ng HighlightDirective kumukuha ang klase ng ElementRef parameter, na awtomatikong ini-inject ng Angular. Ang ElementRef ay nagbibigay ng access sa pinagbabatayan na elemento ng DOM.

Gamit this.element.nativeElement property, ina-access mo ang native na elemento ng DOM ng elemento parameter. Pagkatapos ay itinakda mo ang kulay ng background ng bahagi sa mapusyaw na asul gamit ang istilo ari-arian. Nangangahulugan ito na kahit anong elemento ang ilalapat mo myHighlight Ang direktiba sa ay magkakaroon ng mapusyaw na asul na background.

Upang gawing functional ang direktiba, tiyaking i-import at ideklara mo ito sa app.module.ts file.

Halimbawa:

 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 { }

Ngayon ay maaari mong ilapat ang myHighlight na direktiba sa mga elemento sa iyong Angular na bahagi .

 <main> 
 <p myHighlight>Some text</p> 
</main>

Patakbuhin ang iyong application sa development server upang subukan kung gumagana ang direktiba. Magagawa mo ito sa pamamagitan ng pagpapatakbo ng sumusunod na command sa iyong terminal:

 ng serve

Pagkatapos patakbuhin ang command, mag-navigate sa http://localhost:4200/ sa iyong web browser, at makakakita ka ng interface na kamukha ng larawan sa ibaba.

screenshot ng custom-directives-app

Ang mga angular na built-in na direktiba ay tumatanggap ng mga halaga upang baguhin ang hitsura ng elemento, ngunit ang custom na direktiba myHighlight ay hindi. Maaari mong i-configure ang direktiba upang tanggapin ang isang halaga na gagamitin nito upang dynamic na itakda ang kulay ng background ng template.

Upang gawin ito, palitan ang code sa highlight.directive.ts file kasama nito:

 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) {  
    } 
}

Sa block ng code sa itaas, ang HighlightDirective class ay naglalaman ng isang setter method na tinatawag na myHighlight . Ang pamamaraang ito ay tumatagal ng a kulay parameter ng uri ng string. Palamutihan mo ang paraan ng setter gamit ang @Input dekorador, na nagbibigay-daan sa iyong ipasa ang halaga ng kulay sa direktiba mula sa bahagi ng magulang.

Ngayon ay matutukoy mo na ang kulay ng background sa pamamagitan ng pagpasa ng value sa myHighlight directive.

Halimbawa:

 <main> 
 <p myHighlight='pink'>Some text</p> 
</main>

Paggawa ng Custom na Structural Directive

Sa mga nakaraang seksyon, natutunan mo kung paano lumikha, magdagdag ng mga pag-uugali, at maglapat ng mga custom na direktiba ng katangian sa iyong template. Binabago ng mga direktiba ng katangian ang hitsura ng mga elemento ng DOM, habang ang mga direktiba sa istruktura ay nagdaragdag, nag-aalis, o naglilipat ng mga elemento sa DOM.

Nagbibigay ang Angular ng dalawang direktiba sa istruktura, ngFor at GIF . Ang direktiba ng ngFor nag-render ng template para sa bawat item sa isang koleksyon (array), habang ang GIF pinangangasiwaan ang conditional rendering.

Sa seksyong ito, gagawa ka ng custom na structural directive na gumagana tulad ng GIF direktiba. Upang gawin ito, lumikha ng a kundisyon.direktiba.ts file.

Nasa kundisyon.direktiba.ts file, isulat ang code na ito:

 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  
 ) {} 
}

Binibigyang-daan ka ng block ng code na ito na may kondisyong mag-render ng mga elemento sa pamamagitan ng paglalapat ng kundisyon direktiba sa isang elemento at pagpasa ng boolean value mula sa parent component.

Sa constructor ng ConditionDirective klase, mag-inject ka ng isang halimbawa ng TemplateRef at ViewContainerRef . Ang TemplateRef ay kumakatawan sa template na nauugnay sa direktiba, at ang ViewContainerRef ay kumakatawan sa lalagyan kung saan ang application ay nagre-render ng mga view.

Gumagamit ang ConditionDirective class setter method ng if else na pahayag upang suriin ang arg parameter. Lumilikha ang direktiba ng naka-embed na view gamit ang ibinigay na template kung totoo ang parameter. Ang createEmbeddedView paraan ng ViewContainerRef class ay lumilikha at nag-render ng view sa DOM.

Kung ang parameter ay mali , nililimas ng direktiba ang view container gamit ang malinaw paraan ng klase ng ViewContainerRef. Inaalis nito ang anumang naunang nai-render na mga view mula sa DOM.

Pagkatapos gumawa ng direktiba, irehistro ito sa iyong proyekto sa pamamagitan ng pag-import at pagdedeklara nito sa app.module.ts file. Pagkatapos gawin ito, maaari mong simulan ang paggamit ng direktiba sa iyong mga template.

Narito ang isang halimbawa kung paano ito gamitin sa iyong mga template:

 <main> 
 <p *condition="true">Hello There!!!</p> 
</main>

Makakagawa Ka na Ngayon ng Mga Custom na Direktiba

Ang mga custom na direktiba sa Angular ay nagbibigay ng isang mahusay na paraan upang manipulahin ang DOM at magdagdag ng dynamic na gawi sa iyong mga template. Natutunan mo kung paano gumawa at maglapat ng mga custom na katangian at mga direktiba sa istruktura sa iyong mga Angular na application. Sa pamamagitan ng pag-unawa kung paano gumawa at gumamit ng mga custom na direktiba, maaari mong lubos na mapakinabangan ang mga kakayahan ng Angular.