hostDirectives-ominaisuus
Liittäkää direktiivejä komponentin host-elementtiin
hostDirectives-ominaisuus on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Direktiivien koostamisen API
Direktiivien koostamisen API antaa komponentille tai direktiiville mahdollisuuden käyttää muita direktiivejä omassa isäntäelementissään deklaratiivisesti hostDirectives-ominaisuuden avulla. Näin toiminnallisuutta voidaan käyttää uudelleen ilman perintää.
Ratkaistava ongelma
Aiemmin direktiivin toiminnallisuuden uudelleenkäyttö tarkoitti joko direktiivin toistamista jokaisessa mallineessa tai perinnän käyttämistä. hostDirectives koostaa toiminnallisuudet suoraan isäntään.
Perussyntaksi
Luettele direktiivit komponentin metatietojen hostDirectives-taulukossa.
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}Mitä tapahtuu
Angular käyttää CdkTrapFocus-direktiiviä automaattisesti jokaisessa app-menu-isäntäelementissä. Kuluttajat saavat toiminnallisuuden käyttöönsä ilman, että heidän tarvitsee lisätä direktiiviä itse.
Vaatimukset
Isäntädirektiivien on oltava standalone-direktiivejä. Viittaat direktiivin luokkaan suoraan, et sen selektoriin.
Useita isäntädirektiivejä
Koosta useita toiminnallisuuksia luettelemalla ne kaikki.
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]Käyttäminen direktiivissä
Myös direktiivillä voi olla isäntädirektiivejä, joten voit rakentaa kerroksittaisia ja koostettavia toiminnallisuuksia.
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}Elinkaaren järjestys
Isäntädirektiivit alustetaan ennen isännän oman konstruktorilogiikan suorittamista, joten niiden määritykset ovat käytettävissä isännän alustuksen aikana.
Riippuvuuksien injektointi
Isäntädirektiivit voidaan injektoida isäntään ja päinvastoin elementti-injektorin kautta, mikä mahdollistaa koostettujen toiminnallisuuksien koordinoinnin.
private trap = inject(CdkTrapFocus);Muutoksia mallineeseen ei tarvita
Keskeinen hyöty on, että app-menu-komponentin käyttäjien ei tarvitse tietää CdkTrapFocus-direktiivistä. Toiminnallisuus on kapseloitu komponentin määritykseen.
Milloin sitä kannattaa käyttää
Käytä hostDirectives-ominaisuutta kokoamaan komponentteihin tai direktiiveihin siististi ja uudelleenkäytettävästi poikkileikkaavia toiminnallisuuksia, kuten kohdistuksen lukitusta, ripple-tehostetta tai analytiikkaa.
Pikatarkistus
Testaa, kuinka hyvin ymmärrät hostDirectives-ominaisuuden.
Kertaus
Opit, että hostDirectives-ominaisuus käyttää standalone-direktiivejä automaattisesti komponentin tai direktiivin isäntäelementissä. Näin toiminnallisuuksia voidaan käyttää uudelleen koostamisen avulla ilman mallineita tai perintää.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”hostDirectives-ominaisuus” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “hostDirectives-ominaisuus”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”hostDirectives-ominaisuus”?
Liittäkää direktiivejä komponentin host-elementtiin Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”hostDirectives-ominaisuus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- hostDirectives-ominaisuus
- Input- ja output-arvojen tarjoaminen
- Uudelleenkäytettävien toimintojen rakentaminen
- Kompositio vai perintä