AngularJS 1:ssä, jos haluat vaihtaa DOM-elementtien näyttötilan, käytät todennäköisesti AngularJS 1:n sisäänrakennettuja komentoja, kuten ng-show tai ng-hide:
AngularJS 1 -esimerkki:
Angular2:ssa uusi mallipohjasyntaksi mahdollistaa lausekkeiden sitomisen mihin tahansa DOM-elementtien natiiviominaisuuksiin. Tämä aivan mahtava ominaisuus avaa loputtomasti mahdollisuuksia. Yksi niistä on sitoa lauseke natiiviin piilotettuun ominaisuuteen, joka on vähän kuin ng-show, ja asettaa myös display: ei elementille:
[piilotettu] esimerkki angular2:sta (ei suositella):
Ensisilmäyksellä yllä oleva esimerkki vaikuttaa olevan ng-show AngularJS 1:ssä. Itse asiassa he ovat! Tärkeitä eroja.
Sekä ng-show että ng-hide ohjaavat DOM-elementtien näyttötilaa CSS-luokan nimeltä ng-hide kautta, joka yksinkertaisesti asettaa elementin näyttämään: ei yhtään. Avain tässä on, että AngularJS 1 on lisätty ng-hide -luokkaan! important, joka säätää luokan prioriteettia niin, että se voi ohittaa elementin näyttöattribuutin määrittämisen muista tyyleistä.
Palatakseni tähän esimerkkiin: display: none -tyyli natiivissa piilotetussa attribuutissa on selaimen toteuttama. Useimmat selaimet eivät käytä sitä! tärkeää säätää sen prioriteettia. Näin ollen elementin näyttötilan hallinta [hidden]="expression" avulla voi helposti vahingossa ylikirjoittaa muiden tyylien toimesta. Esimerkiksi: jos kirjoitan tällaisen tyylin tälle elementille muualle, display: flex, tämä menee etusijalle alkuperäiseen piilotettuun ominaisuuteen nähden (katso tästä).
Tästä syystä käytämme yleensä *ngIf-näppäintä vaihtamaan elementtien läsnäolotilaa saman tavoitteen saavuttamiseksi:
*ngIf esimerkki angular2:sta (suositeltava):
Toisin kuin natiivisti piilotettu ominaisuus, *ngIf Angular2:ssa ei ole tyylirajoitettu. Riippumatta siitä, millaista CSS:ää kirjoitat, hän on turvassa. On kuitenkin syytä mainita, että *ngIf ei ohjaa elementin näyttötilaa, vaan saavuttaa suoraan näyttämisen vai ei-efektin lisäämällä/poistamalla elementin mallipohjasta.
Tietenkin voit myös lisätä piilotetun prioriteetin elementin piilotettuun attribuuttiin käyttämällä globaalia tyyliä, kuten display: none !important, tämän efektin saavuttamiseksi. Saatat kysyä, koska kulmaryhmä tietää nämä ongelmat, miksi et vain lisäisi globaalia korkeimman prioriteetin piilotettua tyyliä kehyksen piilotettuun tyyliin? Vastaus on, että emme voi taata, että globaalien tyylien lisääminen olisi paras valinta kaikkiin sovelluksiin. Koska tämä lähestymistapa rikkoo toiminnallisuuden, joka perustuu natiivien piilotettuihin ominaisuuksiin, jätämme valinnan insinööreille.
|
Julkaistu 22.5.2019 14.02.02
|
|
|
