Kaikki mitä sinun tarvitsee tietää -, -, - ja * ngTemplateOutlet -sovelluksista kulmassa

Se oli yksi niistä päivistä, jolloin työskentelin kiireisesti toimistoprojektini uusien ominaisuuksien parissa. Yhtäkkiä joku kiinnitti huomioni:

Lopullinen renderoitu DOM kulmassa

Tarkastaessani DOM: ta, huomasin, että Angular sovelsi elementtejä ng-sisältöön. Hmm ... jos ne sisältävät elementit lopullisessa DOM-muodossa, mitä hyötyä on ? Tuolloin sekoitin ja välillä.

Pyrkiessään vastaamaan kysymyksiini löysin käsitteen . Yllätyksekseni siellä oli myös * ngTemplateOutlet. Aloitin matkan etsimällä selkeyttä kahdesta käsitteestä, mutta nyt niitä oli neljä, kuulostaen melkein samalta!

Oletko koskaan käynyt tässä tilanteessa? Jos kyllä, niin olet oikeassa paikassa. Joten otamme heidät yksi kerrallaan ilman enempää.

1.

Kuten nimestä voi päätellä, on mallielementti, jota Kulma käyttää rakennedirektiivien kanssa (* ngIf, * ngFor, [ngSwitch] ja mukautetut direktiivit).

Nämä mallielementit toimivat vain rakenteellisten direktiivien ollessa läsnä. Kulma käärii isäntäelementin (johon direktiiviä sovelletaan) : n sisäpuolelle ja kuluttaa valmiissa DOM: ssa korvaamalla sen diagnostiikkakommenteilla.

Mieti yksinkertaista esimerkkiä * ngIf:

Esimerkki 1- Rakenteellisten direktiivien tulkintakulma

Yllä on * ngIf: n kulmakäsitys. Kulma asettaa isäntäelementin, johon direktiiviä sovelletaan, , ja pitää isäntä sellaisenaan. Lopullinen DOM on samanlainen kuin mitä olemme nähneet tämän artikkelin alussa:

Esimerkki 1- Lopullinen renderoitu DOM

Käyttö:

Olemme nähneet kuinka Angular käyttää , mutta entä jos haluamme käyttää sitä? Koska nämä elementit toimivat vain rakennedirektiivin kanssa, voimme kirjoittaa seuraavasti:

Esimerkki 2- <ngmplaatin> käyttö

Tässä koti on komponentin boolean-ominaisuus, joka on asetettu todelliseen arvoon. Yllä olevan koodin tulostus DOM: ssa

Esimerkki 2 - Lopullinen renderoitu DOM

Mitään ei sulatettu! :(

Mutta miksi emme näe viestiämme edes sen jälkeen, kun on käytetty oikein rakennedirektiivin kanssa?

Tämä oli odotettu tulos. Kuten olemme jo keskustelleet, Angular korvaa