|
|
Publicēts 25.10.2018 15:52:29
|
|
|
Iepazīšanās ar RouterLink komandām
Komanda RouterLink ļauj izveidot saiti uz noteiktu lietojumprogrammas daļu. Ja saite ir statiska, mēs varam izmantot komandu šādā veidā:
Ja nepieciešams ģenerēt saišu adreses ar dinamiskām vērtībām, varat nodot ceļu segmentu masīvu un pēc tam katra segmenta parametrus. Piemēram, izmantojot masīvu ['/team', teamId, 'user', userName, {details: true}] nozīmē, ka mēs vēlamies ģenerēt saiti uz /team/11/user/bob; detaļas=patiess 。
Vairākus statiskus segmentus var apvienot vienā, piemēram, ['/team/11/user', userName, {details: true}].
Pirmo ceļa fragmentu var definēt kā /, ./ vai . / Sākums:
- Ja tas sākas ar /, maršruts sāks meklēt augšup no saknes maršruta
- Ja tas sākas ar ./ vai netiek izmantots, maršruts sāks meklēt augšup, sākot no bērna maršruta, kas pašlaik ir aktīvs maršrutam
- Ja sākat ar : / sākas, maršruts pāriet uz nākamo uzmeklēšanas līmeni
Vaicājuma parametrus un fragmentus var iestatīt šādos veidos:
Komanda RouterLink ģenerēs šādu saiti, pamatojoties uz iepriekš iestatītajiem ievades parametriem: /user/bob#education?debug=true. Turklāt mēs varam paziņot, kā apstrādāt vaicājuma parametrus, izmantojot vaicājuma rekvizītuParamsHandling, pieejamās iespējas ir:
- merge - Sapludināt esošos vaicājumusParams pašreizējā vaicājumāParams
- saglabāt - saglabāt pašreizējo vaicājumuParams
- default ('') — izmantot tikai vaicājuma parametrus
Konkrēti lietošanas piemēri ir šādi:
Komanda RouterLink detalizēti izskaidrota
RouterLink komandas definīcija
Komandas ievades rekvizīts RouterLink
Ar URL saistīto vaicājuma parametru iestatīšana
@Input() vaicājumsParams: {[k: virkne]: jebkurš};
Jaucējkoda fragmenta iestatīšana URL
@Input() fragments: virkne;
Vaicājuma parametru apstrādes režīma iestatīšana: sapludināšana, saglabāšana un noklusējums
@Input() vaicājumsParamsApstrāde: VaicājumsParamsApstrāde;
Iestata, vai saglabāt fragmentus
@Input() preserveFragments: būls;
Iestatot lapas navigāciju, vai vēsturei pievienot jaunus statusus
@Input() skiplocatio{filter}nMainīt: boolean;
Iestatot lapas navigāciju, vai aizstāt pašreizējo stāvokli vēsturē
@Input() replaceUrl: būls;
Iestatiet komandu parametru informāciju, piemēram: ['/user/bob']
@Input()
set routerLink(komandas: jebkura[]|virkne) {
if (komandas != null) {
this.commands = Array.isArray(komandas) ? komandas : [komandas];
} citādi {
this.commands = [];
}
}
RouterLink komandu saistīšana
Notikumu saistīšana
RouterLink klase
@Attribute()
@Attribute('attributeName') dekorators: izmanto, lai iegūtu atribūta vērtību, kas atbilst atribūta nosaukumam komandas resursdatora elementā.
TabIndex
Rekvizīts tabindex norāda elementa tabulēšanas taustiņu vadīklas secību (ja tabulēšanas taustiņš tiek izmantots navigācijai).
Tālāk norādītie elementi atbalsta tabindex atribūtus: <a>, <area>, <button><input><object><select> , , un <textarea> .
TabIndex sintakse:
RouterLink klase
RouterLink klase
Komanda RouterLinkWithHref
RouterLinkWithHref direktīva
RouterLinkWithHref direktīvas ievades rekvizīts
Komanda RouterLinkWithHref
Atribūta saistīšana
<a> Atzīmes definē hipersaites, kas tiek izmantotas, lai izveidotu saiti no vienas lapas uz citu. <a> Tagos ir divi svarīgi atribūti:
href - norāda tās lapas URL adresi, uz kuru ved saite. Ja neizmantojat atribūtu href, jūs nevarat izmantot šādus atribūtus: download, media, rel, target un type atribūtus.
Mērķis - norāda, kā saistītā lapa tiek atvērta pārlūkprogrammas logā, un tās parametru vērtības galvenokārt ir šādas:
_blank - Ielādējiet mērķa dokumentu jaunā pārlūkprogrammas logā.
_parent — šis mērķis liek dokumentam ielādēties vecāklogā vai rāmju kopā, kurā ir rāmis, uz kuru atsaucas hipersaite. Ja šī atsauce ir logā vai augstākā līmeņa sistēmā, tad tā ir līdzvērtīga mērķa _self.
_self — šī mērķa vērtība ir noklusējuma mērķis visām etiķetēm, kas nenorāda mērķi <a> , kā rezultātā mērķa dokuments tiek ielādēts un parādīts kā avota dokuments tajā pašā rāmī vai logā. Šis mērķis ir lieks un nevajadzīgs, ja vien tas netiek <base> izmantots kopā ar mērķa atribūtu dokumenta virsraksta cilnē.
_top — šis mērķis liek dokumentam ielādēt logu, kurā ir hipersaite, un, izmantojot _top mērķi, tiks notīrīti visi iekļautie rāmji un ielādēts dokuments visā pārlūkprogrammas logā.
Notikumu saistīšana
MouseEvent ir notikums, kas notiek, kad lietotājs mijiedarbojas ar rādītāja ierīci (piemēram, peli), un bieži sastopamie notikumi ir: klikšķis, dblklikšķis, peles pacelšana un peles nolaišana. Objekts MouseEvent satur pogas atribūtu, kas apzīmē lietotāja nospiesto peles pogu, un iespējamās atribūtu vērtības ir šādas:
- 0 - tiek nospiesta galvenā poga, parasti atsaucoties uz peles kreiso pogu.
- 1 - tiek nospiesta papildu poga, parasti atsaucoties uz peles riteni.
- 2 - tiek nospiests otrais taustiņš, parasti atsaucoties uz peles labo pogu.
- 3 - Tiek nospiesta ceturtā poga, kas parasti attiecas uz pārlūkprogrammas atpakaļ pogu.
- 4 - Tiek nospiesta piektā poga, kas parasti attiecas uz pārlūkprogrammas pogu uz priekšu.
Pelei, kas konfigurēta lietošanai ar kreiso roku, taustiņsitieni būs pretēji. Šajā gadījumā vērtība tiek nolasīta no labās uz kreiso pusi. Iepriekš minētajā koda piemērā mēs piekļūstam arī objekta MouseEvent rekvizītiem ctrlKey un metaKey, kas papildus šiem diviem rekvizītiem satur rekvizītus altKey un shiftKey. Šie atribūti ir aprakstīti tālāk.
- MouseEvent.ctrlKey - atgriež patiesu, ja tiek nospiests vadības taustiņš, kad tiek aktivizēts peles notikums.
- MouseEvent.metaKey - atgriež patiesu, ja, aktivizējot peles notikumu, tiek nospiests taustiņš (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey — atgriež true, kad peles notikums tiek aktivizēts, ja tiek nospiests taustiņš (Window - alt, Mac - Option vai ⌥ ).
- MouseEvent.shiftKey — atgriež true, ja taustiņš Shift tiek nospiests, kad tiek aktivizēts peles notikums.
Ja nospiežat ctrlKey un pēc tam noklikšķināt uz cilnes, <a> tiks izveidota jauna cilnes lapa, izmantojot pašreizējo URL adresi. Ja nospiežat metaKey un pēc tam noklikšķināt uz <a> cilnes, pašreizējā lapa tiks atsvaidzināta. Tāpēc onClick() metodē tiek veikts atbilstošs spriedums.
RouterLinkWithHref komandas dzīves cikls
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref klase
RouterLinkWithHref klase
RouterLinkWithHref klase
Ievads komandā RouterLinkActive
RouterLinkActive direktīva ļauj elementam pievienot CSS klases, kad saistītais maršruts kļūst aktīvs. Apskatiet šādu piemēru:
Ja URL adrese ir /user vai /user/bob, tagam tiks pievienota aktīvo saišu klase <a> . Ja URL mainās, aktīvo saišu klase tiek automātiski noņemta no <a> taga. Varat arī pievienot vairākas klases vienlaikus, kā norādīts tālāk.
Lietojot komandu routerLinkActive, varat arī izmantot parametru routerLinkActiveOptions, lai konfigurētu URL atbilstību, kā norādīts tālāk.
Ja parametrs {exact: true} ir konfigurēts, aktīvo saišu klase tagam tiek pievienota tikai tad, ja URL adrese precīzi atbilst <a> . Varat arī piešķirt RouterLinkActive instanci veidnes mainīgajam un pārbaudīt komandu direktīvu statusu isActive:
Visbeidzot, varat arī lietot komandu RouterLinkActive RouterLink vecākelementam. Piemēri:
Iepriekš minētajā piemērā, kad URL ir adresēts kā /user/jim vai /user/bob, aktīvās saites klase tiek <div> pievienota attiecīgajam elementam.
Komanda RouterLinkActive detalizēti izskaidrota
RouterLinkActive komandas definīcija
Komandas ievades rekvizīts RouterLinkActive
RouterLinkActive komandas dzīves cikls
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive klase
RouterLinkActive klase
RouterLinkActive klase
|
Iepriekšējo:Šeit ir funkcija, kas ir patiešām laba, jūs varat nopelnīt naudu, tā ir veicināšana.Nākamo:Izlaida DZ tiešsaistes maksājumu spraudni bez līguma, kas ir pieejams personīgai testēšanai.
|
