|
|
Postitatud 25.10.2018 15:52:29
|
|
|
Sissejuhatus RouterLinki käskudele
Käsk RouterLink võimaldab sul ühendada konkreetse rakenduse osaga. Kui link on staatiline, saame käsku kasutada järgmiselt:
Kui on vaja genereerida lingiaadresse dünaamiliste väärtustega, saad edastada teelõikude massiivi ja seejärel iga segmendi parameetreid. Näiteks massiivi kasutamine ['/team', teamId, 'user', userName, {details: true}] tähendab, et soovime genereerida lingi /team/11/user/bob; details=true 。
Mitu staatilist segmenti saab ühendada üheks, nt ['/team/11/user', userName, {details: true}].
Esimene teelõik on defineeritud kui /, ./, või . / Algus:
- Kui see algab /-ga, hakkab marsruut juurmarsruudilt üles vaatama
- Kui see algab ./ või ei ole kasutusel, hakkab marsruut üles otsima lapsmarsruudilt, mis on praegu aktiivne sellel marsruudil
- Kui alustad järgmiselt: / algab, liigub marsruut järgmisele otsingutasemele
Päringuparameetreid ja fragmente saab määrata järgmiselt:
RouterLink käsk genereerib järgmise lingi ülaltoodud sisendparameetrite põhjal: /user/bob#education?debug=true. Lisaks saame määratleda, kuidas päringuparameetreid hallata queryParamsHandling omaduse kaudu, saadaval olevad valikud on:
- merge - Ühenda olemasolevad queryParams'id praegustesse queryParams'idesse.
- preserve - Salvesta praegused päringuParamid
- vaikimisi ('') - Kasuta ainult päringuparameetreid
Konkreetsed kasutusnäited on järgmised:
RouterLinki käsk selgitab üksikasjalikult
RouterLink käsu definitsioon
RouterLink käsu sisendi omadus
Määra päringuparameetrid, mis on seotud URL-iga
@Input() queryParams: {[k: string]: any};
Sea räsi fragment URL-ile
@Input() fragment: string;
Sea päringuparameetrite töötlemise režiim: ühenda, säilita ja vaikimisi
@Input() queryParamsHandling: QueryParamsHandling;
Määrab, kas fragmente hoida
@Input() säilitabFragment: boolean;
Lehekülje navigeerimise määramisel tuleb lisada ajalukku uusi staatuseid
@Input() skiplocatio{filter}nChange: boolean;
Lehekülje navigeerimise seadistamisel, kas asendada praegune olek ajaloos
@Input() replaceUrl: boolean;
Seadke käsud parameetrite infot, näiteks: ['/user/bob']
@Input()
set routerLink(käsud: any[]|string) {
if (käsud != null) {
this.commands = Array.isArray (käsud) ? käsud: [käsud];
} muidu {
this.commands = [];
}
}
RouterLink käsude sidumine
Sündmuste sidumine
RouterLink klass
@Attribute()
@Attribute('attributeName') dekoraator: Kasutatakse atribuudi väärtuse saamiseks, mis vastab atribuudi nimele käsu hosti elemendil.
tabindex
Tabindex omadus määrab elemendi tab-klahvi juhtimisjärjekorra (kui navigeerimiseks kasutatakse tab-klahvi).
Järgmised elemendid toetavad tabindexi atribuute: <a>, <area>, <button>, <input><object><select> , ja <textarea> .
tabindex süntaks:
RouterLink klass
RouterLink klass
RouterLinkWithHref käsk
RouterLinkWithHref direktiiv
RouterLinkWithHref direktiivi sisendomadus
RouterLinkWithHref käsk
atribuudi sidumine
<a> Sildid määratlevad hüperlingid, mida kasutatakse ühelt lehelt teisele viikimiseks. Siltidel <a> on kaks olulist omadust:
href - määrab lehe URL-aadressi, kuhu link viib. Kui te ei kasuta href atribuuti, ei saa te kasutada järgmisi atribuute: download, media, rel, target ja type atribuudid.
Target - määrab, kuidas lingitud leht avaneb brauseriaknas, ning selle parameetrite väärtused on peamiselt järgmised:
_blank - Laadi sihtdokument uude brauseriaknasse.
_parent - See eesmärk paneb dokumendi laadima vanemaknasse või raamikomplekti, mis sisaldab hüperlingi viidatud raami. Kui see viide on aknas või tipptasemel raamistikus, siis on see ekvivalentne sihtmärgi _self.
_self - Selle sihtmärgi väärtus on vaikimisi sihtmärk kõigile siltidele, mis ei määra <a> sihtmärki , mis põhjustab sihtdokumendi laadimise ja kuvamise algdokumendina samas kaadris või aknas. See sihtmärk on üleliigne ja tarbetu, välja arvatud juhul <base> , kui seda kasutatakse sihtatribuudiga dokumendi pealkirja vahekaardil.
_top - See eesmärk paneb dokumendi laadima akna, mis sisaldab hüperlinki, ning _top sihtmärgi abil kustutatakse kõik kaasatud raamid ja dokument laaditakse kogu brauseriaknas.
Sündmuste sidumine
MouseEvent tähistab sündmust, mis tekib siis, kui kasutaja suhtleb osutiga (näiteks hiirega), ning levinud sündmused on: klõps, dblklõps, hiire ülestõstmine ja hiireallas. MouseEvent objekt sisaldab nupu atribuuti, mis esindab kasutaja vajutatud hiireklahvi, ning võimalikud atribuudi väärtused on järgmised:
- 0 - Peamist nuppu vajutatakse, tavaliselt viidates vasakule hiireklahvile.
- 1 - Abinuppu vajutatakse, tavaliselt viidates hiirerattale.
- 2 - Teine klahv vajutatakse, tavaliselt viidates paremale hiireklahvile.
- 3 - Neljas nupp vajutatakse, tavaliselt viidates brauseri tagasinupule.
- 4 - Viies nupp vajutatakse, tavaliselt viidates brauseri edasi nupule.
Vasakukäeliseks kasutamiseks seadistatud hiirel on klahvivajutused vastupidised. Sellisel juhul loetakse väärtus paremalt vasakule. Ülaltoodud näitekoodis pääseme ligi ka MouseEvent objekti ctrlKey ja metaKey omadustele, mis sisaldavad altKey ja shiftKey omadusi lisaks neile kahele omadusele. Need omadused on kirjeldatud allpool:
- MouseEvent.ctrlKey - tagastab tõe, kui hiire sündmuse käivitamisel vajutatakse control-klahvi.
- MouseEvent.metaKey - tagastab tõe, kui hiire sündmuse käivitamisel vajutatakse klahvi (Window - ⊞, Mac - ⌘ Command).
- MouseEvent.altKey - Tagastab tõe, kui hiiresündmus käivitub, kui vajutatakse (Window - alt, Mac - Option või ⌥) klahvi.
- MouseEvent.shiftKey – Tagastab true, kui shift-klahvi vajutatakse hiire sündmuse käivitamisel.
Kui vajutad ctrlKey ja klikid vahekaardil, <a> luuakse uus vahekaardileht praeguse URL-aadressi järgi. Kui vajutad metaKey ja klikid <a> vahekaardil, värskendatakse praegust lehte. Seetõttu viiakse onClick() meetodis vastav hinnang läbi.
RouterLinkWithHref käsu elutsükkel
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref klass
RouterLinkWithHref klass
RouterLinkWithHref klass
Sissejuhatus käsuga RouterLinkActive
RouterLinkActive direktiiv võimaldab lisada CSS-klasse elemendile, kui lingitud marsruut muutub aktiivseks. Vaata järgmist näidet:
Kui URL-aadress on /user või /user/bob, lisatakse sildile aktiivlingi klass <a> . Kui URL muutub, eemaldatakse aktiivse lingi klass automaatselt <a> sildist. Saad lisada ka mitu klassi korraga, järgmiselt:
Käsu routerLinkActive rakendamisel saad kasutada ka routerLinkActiveOptions parameetrit, et seadistada, kuidas URL-id sobitatakse, järgmiselt:
Kui {täpselt: true} parameeter on seadistatud, lisatakse aktiivse lingi klass sildile ainult siis, kui URL-aadress vastab täpselt <a> . Samuti saab määrata RouterLinkActive eksemplari mallimuutujale ja kontrollida käsudirektiivide isActive staatust direktiividega:
Lõpuks saad rakendada RouterLinkActive käsu ka RouterLinki vanemelemendile. Näited on:
Ülaltoodud näites, kui URL adresseeritakse /user/jim või /user/bob, lisatakse vastavale elemendile aktiivlingi klass <div> .
RouterLinkActive käsk selgitatakse üksikasjalikult
RouterLinkActive käsu definitsioon
RouterLinkActive käsu sisendi omadus
RouterLinkActive käsu elutsükkel
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive klass
RouterLinkActive klass
RouterLinkActive klass
|
Eelmine:Siin on üks väga hea funktsioon – saad raha teenida, see on reklaam.Järgmine:Avaldas DZ veebimakse lepinguvaba plugina, mis on saadaval isiklikuks testimiseks.
|
