|
|
Paskelbta 2018-10-25 15:52:29
|
|
|
Įvadas į "RouterLink" komandas
Komanda RouterLink leidžia susieti su konkrečia programos dalimi. Jei nuoroda yra statiška, komandą galime naudoti tokiu būdu:
Jei reikia generuoti saitų adresus su dinaminėmis reikšmėmis, galite perduoti kelio segmentų masyvą ir kiekvieno segmento parametrus. Pavyzdžiui, naudojant masyvą ['/team', teamId, 'user', userName, {details: true}] reiškia, kad norime sugeneruoti nuorodą į /team/11/user/bob; detalės=teisinga 。
Keli statiniai segmentai gali būti sujungti į vieną, pvz., ['/team/11/user', userName, {details: true}].
Pirmasis kelio fragmentas gali būti apibrėžtas kaip /, ./ arba . / Pradžia:
- Jei jis prasideda /, maršrutas pradės ieškoti aukštyn nuo šakninio maršruto
- Jei jis prasideda ./ arba nenaudojamas, maršrutas pradės ieškoti aukštyn iš antrinio maršruto, kuris šiuo metu yra aktyvus maršrutui
- Jei pradėsite nuo : / prasideda, maršrutas pereina į kitą paieškos lygį
Užklausos parametrus ir fragmentus galite nustatyti šiais būdais:
Komanda "RouterLink" sugeneruos šią nuorodą pagal aukščiau nustatytus įvesties parametrus: /user/bob#education?debug=true. Be to, galime deklaruoti, kaip tvarkyti užklausos parametrus naudojant ypatybę queryParamsHandling, galimos parinktys yra šios:
- merge - sulieti esamą užklausąParams į dabartinę užklausąParams
- išsaugoti - įrašyti dabartinę užklausąParams
- numatytasis ('') – naudoti tik užklausos parametrus
Konkretūs naudojimo pavyzdžiai yra šie:
Išsamiai paaiškinta "RouterLink" komanda
"RouterLink" komandos apibrėžimas
RouterLink komandos įvesties ypatybė
Su URL susijusių užklausos parametrų nustatymas
@Input() užklausaParams: {[k: eilutė]: bet koks};
Nustatykite maišos fragmentą URL
@Input() fragmentas: styga;
Nustatykite užklausos parametrų apdorojimo režimą: sujungti, išsaugoti ir numatytąjį
@Input() užklausaParamsTvarkymas: UžklausaParamsTvarkymas;
Nustatoma, ar saugoti fragmentus
@Input() preserveFragment: Bulio;
Nustatant puslapio naršymą, ar įtraukti naujas būsenas į retrospektyvą
@Input() skiplocatio{filter}nChange: boolean;
Nustatant puslapio naršymą, ar pakeisti dabartinę būseną istorijoje
@Input() replaceUrl: Bulio;
Nustatykite komandų parametrų informaciją, pvz.: ['/user/bob']
@Input()
set routerLink(komandos: bet kokia[]|eilutė) {
if (komandos != null) {
this.commands = Array.isArray(komandos) ? komandos : [komandos];
} else {
this.commands = [];
}
}
"RouterLink" komandų susiejimas
Įvykio susiejimas
"RouterLink" klasė
@Attribute()
@Attribute('attributeName') dekoratorius: naudojamas norint gauti atributo reikšmę, atitinkančią atributo pavadinimą komandos pagrindinio elemento atributo pavadinimą.
tabindex
Tabindex ypatybė nurodo elemento tabuliacijos klavišo valdymo tvarką (kai tabuliacijos klavišas naudojamas naršymui).
Šie elementai palaiko tabindex atributus: <a>, <area>, <button>, <input><object><select> , , , ir <textarea> .
Tabindex sintaksė:
"RouterLink" klasė
"RouterLink" klasė
Komanda RouterLinkWithHref
RouterLinkWithHref direktyva
RouterLinkWithHref direktyvos įvesties ypatybė
Komanda RouterLinkWithHref
Atributų susiejimas
<a> Žymos apibrėžia hipersaitus, naudojamus susieti iš vieno puslapio į kitą. <a> Žymose yra du svarbūs atributai:
href - nurodo puslapio, į kurį veda nuoroda, URL adresą. Jei nenaudojate atributo href, negalite naudoti šių atributų: download, media, rel, target ir type atributų.
tikslas - nurodo, kaip susietas puslapis atidaromas naršyklės lange, o jo parametrų reikšmės daugiausia yra šios:
_blank - Įkelti paskirties dokumentą į naują naršyklės langą.
_parent – dėl šio tikslo dokumentas įkeliamas į pirminį langą arba rėmelių rinkinį, kuriame yra hipersaito nurodytas rėmelis. Jei ši nuoroda yra lange arba aukščiausio lygio sistemoje, ji atitinka tikslinę _self.
_self – šios paskirties reikšmė yra numatytoji visų žymų, kurios nenurodo paskirties vietos, paskirtis <a> , todėl paskirties dokumentas įkeliamas ir rodomas kaip šaltinio dokumentas tame pačiame rėmelyje arba lange. Šis tikslas yra nereikalingas ir nereikalingas <base> , nebent naudojamas su paskirties atributu dokumento pavadinimo skirtuke.
_top – dėl šio tikslo dokumentas įkelia langą, kuriame yra hipersaitas, o naudojant _top paskirtį bus išvalyti visi įtraukti rėmeliai ir dokumentas bus įkeltas į visą naršyklės langą.
Įvykio susiejimas
MouseEvent reiškia įvykį, kuris įvyksta, kai vartotojas sąveikauja su žymeklio įrenginiu (pvz., pele), o dažni įvykiai yra spustelėjimas, dblclick, mouseup ir mousedown įvykiai. Objekte MouseEvent yra mygtuko atributas, nurodantis vartotojo paspaustą pelės mygtuką, o galimos atributų reikšmės yra šios:
- 0 - paspaudžiamas pagrindinis mygtukas, paprastai reiškiantis kairįjį pelės mygtuką.
- 1 - Paspaudžiamas pagalbinis mygtukas, paprastai nurodantis pelės ratuką.
- 2 - Paspaudžiamas antrasis klavišas, paprastai nurodantis dešinįjį pelės mygtuką.
- 3 - Paspaudžiamas ketvirtasis mygtukas, paprastai nurodantis naršyklės grįžimo mygtuką.
- 4 - Paspaudžiamas penktasis mygtukas, paprastai nurodantis naršyklės pirmyn mygtuką.
Pelei, sukonfigūruotai naudoti kairiarankiams, klavišų paspaudimai bus priešingi. Tokiu atveju vertė skaitoma iš dešinės į kairę. Aukščiau pateiktame kodo pavyzdyje taip pat pasiekiame "MouseEvent" objekto "ctrlKey" ir "metaKey" ypatybes, kuriose, be šių dviejų savybių, yra "altKey" ir "shiftKey" ypatybės. Šie atributai aprašyti toliau:
- MouseEvent.ctrlKey - grąžina teisingą, jei paspaudžiamas valdymo klavišas, kai suveikia pelės įvykis.
- MouseEvent.metaKey - grąžina teisingą, jei suaktyvinus pelės įvykį paspaudžiamas klavišas (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey – grąžina teisingą, kai pelės įvykis suaktyvinamas, jei paspaudžiamas klavišas (Window - alt, Mac - Option arba ⌥ ).
- MouseEvent.shiftKey – grąžina teisingą, jei paspaudžiamas klavišas "Shift", kai suaktyvinamas pelės įvykis.
Jei paspausite ctrlKlavišą ir spustelėsite skirtuką, <a> bus sukurtas naujo skirtuko puslapis naudojant dabartinį URL adresą. Jei paspausite metaKey ir spustelėsite <a> skirtuką, dabartinis puslapis bus atnaujintas. Todėl taikant onClick() metodą atliekamas atitinkamas sprendimas.
RouterLinkWithHref komandos gyvavimo ciklas
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref klasė
RouterLinkWithHref klasė
RouterLinkWithHref klasė
Įvadas į komandą "RouterLinkActive"
RouterLinkActive direktyva leidžia pridėti CSS klases prie elemento, kai susietas maršrutas tampa aktyvus. Pažvelkite į šį pavyzdį:
Kai URL adresas yra /user arba /user/bob, aktyvios nuorodos klasė bus <a> pridėta prie žymos. Jei URL pasikeičia, aktyviųjų nuorodų klasė automatiškai pašalinama iš <a> žymos. Taip pat galite įtraukti kelias klases vienu metu, kaip nurodyta toliau.
Taikydami komandą routerLinkActive, taip pat galite naudoti parametrą routerLinkActiveOptions, kad sukonfigūruotumėte, kaip atitinka URL, kaip nurodyta toliau:
Sukonfigūravus parametrą {exact: true}, aktyviosios nuorodos klasė pridedama prie žymos tik tuo atveju, jei URL adresas tiksliai sutampa <a> . Taip pat galite priskirti "RouterLinkActive" egzempliorių šablono kintamajam ir patikrinti komandų nurodymų būseną "isActive":
Galiausiai taip pat galite pritaikyti komandą "RouterLinkActive" pirminiam "RouterLink" elementui. Pavyzdžiai:
Aukščiau pateiktame pavyzdyje, kai URL adresuojamas kaip /user/jim arba /user/bob, aktyvios nuorodos klasė pridedama <div> prie atitinkamo elemento.
Komanda "RouterLinkActive" išsamiai paaiškinta
RouterLinkActive komandos apibrėžimas
RouterLinkActive komandos įvesties ypatybė
"RouterLinkActive" komandų gyvavimo ciklas
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive klasė
RouterLinkActive klasė
RouterLinkActive klasė
|
Ankstesnis:Čia yra funkcija, kuri yra tikrai gera, galite užsidirbti pinigų, tai yra reklama.Kitą:Išleido DZ internetinio mokėjimo be sutarties papildinį, kurį galima išbandyti asmeniškai.
|
