|
|
Julkaistu 25.10.2018 15.52.29
|
|
|
Johdanto RouterLink-komentoihin
RouterLink-komento antaa sinun linkittää tiettyyn sovelluksesi osaan. Jos linkki on staattinen, voimme käyttää komentoa seuraavasti:
Jos sinun täytyy luoda linkkiosoitteet dynaamisilla arvoilla, voit välittää taulukon polkusegmenttejä ja sitten kunkin segmentin parametrit. Esimerkiksi käyttämällä taulukkoa ['/team', teamId, 'user', userName, {details: true}] tarkoittaa, että haluamme luoda linkin osoitteeseen /team/11/user/bob; Yksityiskohdat=totta 。
Useita staattisia segmenttejä voidaan yhdistää yhdeksi, esim. ['/team/11/user', userName, {details: true}].
Ensimmäinen polkufragmentti voidaan määritellä muodossa /, ./, tai . / Alku:
- Jos se alkaa /:lla, reitti alkaa katsoa ylöspäin juurireitiltä
- Jos se alkaa ./ tai sitä ei käytetä, reitti alkaa katsoa ylöspäin lapsireitistä, joka on tällä hetkellä aktiivinen reitille
- Jos aloitat: / alkaa, reitti siirtyy seuraavalle hakutasolle
Voit asettaa kyselyparametrit ja fragmentit seuraavilla tavoilla:
RouterLink-komento tuottaa seuraavan linkin yllä olevien syöteparametrien perusteella: /user/bob#education?debug=true. Lisäksi voimme ilmoittaa, miten kyselyparametreja käsitellään queryParamsHandling -ominaisuuden kautta, ja käytettävissä olevat vaihtoehdot ovat:
- merge - Yhdistä olemassa olevat queryParamsit nykyisiin queryParamseihin
- preserve - Tallenna nykyiset queryParamsit
- oletus ('') - Käytä vain kyselyparametreja
Erityisiä käyttöesimerkkejä ovat seuraavat:
RouterLink-komento selitettynä yksityiskohtaisesti
RouterLink-komentojen määrittely
RouterLink-komentosyötteen ominaisuus
Aseta URL-osoitteeseen liittyvät kyselyparametrit
@Input() queryParams: {[k: string]: any};
Aseta hajautusfragmentti URL-osoitteeseen
@Input() fragmentti: kieli;
Aseta kyselyparametrien käsittelytila: yhdistä, säilytä ja oletus
@Input() queryParamsHandling: QueryParamsHandling;
Määrittää, säilytetäänkö fragmentteja
@Input() säilyttääFragmentti: boolean;
Kun asetetaan sivun navigointia, lisäätkö uusia tilat historiaan
@Input() skiplocatio{filter}nChange: boolean;
Sivunavigointia asettaessa, vaihdetaanko nykyinen tila historiassa
@Input() replaceUrl: boolean;
Aseta komentojen parametritiedot, esimerkiksi: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (komennot != null) {
this.commands = Array.isArray (komennot) ? käskyt: [käskyt];
} else {
this.commands = [];
}
}
RouterLink-komentosidonta
Tapahtumasidonta
RouterLink-luokka
@Attribute()
@Attribute('attributeName') koristelija: Käytetään hakemaan attribuuttiarvo, joka vastaa attributeName-attribuutin nimeä komentoisäntäelementissä.
tabindex
Tabindex-ominaisuus määrittää elementin tab-näppäimen ohjausjärjestyksen (kun tab-näppäintä käytetään navigointiin).
Seuraavat elementit tukevat välilehti-attribuutteja: <a>, <area>, <button>, <input><object><select> , ja <textarea> .
tabindex-syntaksi:
RouterLink-luokka
RouterLink-luokka
RouterLinkWithHref-komento
RouterLinkWithHref-direktiivi
RouterLinkWithHref-direktiivin syöttöominaisuus
RouterLinkWithHref-komento
attribuuttisidonta
<a> Tagit määrittelevät hyperlinkkejä, joita käytetään linkittämään sivulta toiselle. <a> Tageissa on kaksi tärkeää ominaisuutta:
href - määrittää linkin johtavan sivun URL-osoitteen. Jos et käytä href-attribuuttia, et voi käyttää seuraavia attribuutteja: download, media, rel, target ja type -attribuutit.
target - määrittelee, miten linkitetty sivu avautuu selainikkunassa, ja sen parametriarvot ovat pääasiassa seuraavat:
_blank - Lataa kohdedokumentti uuteen selainikkunaan.
_parent - Tämä tavoite saa asiakirjan lataamaan vanhemman ikkunan tai kehysjoukon, joka sisältää hyperlinkin viitaman kehyksen. Jos tämä viittaus on ikkunassa tai ylätason kehyksessä, se on ekvivalentti kohde-_self kanssa.
_self - Tämän kohteen arvo on oletuskohde kaikille tunnisteille, jotka eivät määrittele <a> kohdetta , jolloin kohdedokumentti ladataan ja näytetään lähdedokumenttina samassa kehyksessä tai ikkunassa. Tämä kohde on tarpeeton ja tarpeeton, <base> ellei sitä käytetä kohteen attribuutin kanssa dokumentin otsikovälilehdellä.
_top - Tämä tavoite saa dokumentin lataamaan ikkunan, jossa on hyperlinkki, ja _top-kohteen avulla kaikki mukana olevat kehykset tyhjennetään, ja dokumentti ladataan koko selainikkunassa.
Tapahtumasidonta
MouseEvent edustaa tapahtumaa, joka tapahtuu, kun käyttäjä on vuorovaikutuksessa osoitinlaitteen (kuten hiiren) kanssa, ja yleisiä tapahtumia ovat: click, dblclick, mouseup ja mousedown. MouseEvent-objekti sisältää painikeattribuutin, joka edustaa käyttäjän painamaa hiiren painiketta, ja mahdolliset attribuuttiarvot ovat seuraavat:
- 0 - Pääpainiketta painetaan, yleensä viitaten vasenta hiiren nappia.
- 1 - Apupainiketta painetaan, yleensä viitaten hiiren pyörään.
- 2 - Toista näppäintä painetaan, yleensä viitaten oikeaan hiiren painikkeeseen.
- 3 - Neljättä nappia painetaan, yleensä viitaten selaimen takaisin-painikkeeseen.
- 4 - Viidettä painiketta painetaan, yleensä viitaten selaimen eteenpäin suuntautuvaan painikkeeseen.
Vasenkätiseen käyttöön konfiguroidussa hiiressä näppäinpainallukset ovat päinvastaiset. Tässä tapauksessa arvo luetaan oikealta vasemmalle. Yllä olevassa esimerkkikoodissa pääsemme myös käsiksi MouseEvent-objektin ctrlKey- ja metaKey-ominaisuuksiin, jotka sisältävät altKey- ja shiftKey-ominaisuudet näiden kahden ominaisuuden lisäksi. Nämä ominaisuudet kuvataan alla:
- MouseEvent.ctrlKey - palauttaa true-arvon, jos control-näppäintä painetaan hiiren tapahtuman laukaistuessa.
- MouseEvent.metaKey - palauttaa true -näppäintä, jos (Window - ⊞, Mac - ⌘ Command) painetaan hiiren tapahtuman käynnistyessä.
- MouseEvent.altKey - Palautuu true -näppäimen käynnistyessä, kun hiiren tapahtuma aktivoituu, jos (Window - alt, Mac - Option tai ⌥) painetaan.
- MouseEvent.shiftKey – Palautuu totta, jos shift-näppäintä painetaan hiiren tapahtuman käynnistyessä.
Jos painat ctrlKeytä ja klikkaat välilehteä, uusi <a> välilehtisivu luodaan nykyisen URL-osoitteen avulla. Jos painat metaKeytä ja klikkaat <a> välilehteä, nykyinen sivu päivittyy. Siksi onClick()-menetelmässä suoritetaan vastaava arviointi.
RouterLinkWithHref-komenton elinkaari
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref-luokka
RouterLinkWithHref-luokka
RouterLinkWithHref-luokka
Johdanto RouterLinkActive-komentoon
RouterLinkActive-direktiivi mahdollistaa CSS-luokkien lisäämisen elementtiin, kun linkitetty reitti aktivoituu. Katso seuraavaa esimerkkiä:
Kun URL-osoite on /user tai /user/bob, aktiivinen linkkiluokka <a> lisätään tagiin. Jos URL-osoite muuttuu, aktiivisen linkin luokka poistetaan automaattisesti <a> tagista. Voit myös lisätä useita luokkia samanaikaisesti seuraavasti:
Kun käytät routerLinkActive-komentoa, voit myös käyttää routerLinkActiveOptions-parametria määrittääksesi, miten URL-osoitteet yhdistetään seuraavasti:
Kun {exact: true} -parametri on konfiguroitu, aktiivinen linkkiluokka lisätään tagiin vain, jos URL-osoite vastaa täsmälleen <a> . Voit myös määrittää RouterLinkActive-instanssin mallimuuttujalle ja tarkistaa komentokäskyjen isActive-tilan direktiiviin:
Lopuksi voit myös soveltaa RouterLinkActive-komentoa RouterLinkin vanhemmalle. Esimerkkejä ovat:
Yllä olevassa esimerkissä, kun URL osoitetaan /user/jim tai /user/bob, aktiivinen linkkiluokka <div> lisätään vastaavaan alkioon.
RouterLinkActive-komento selitetty yksityiskohtaisesti
RouterLinkActive-komentomäärittely
RouterLinkActive-komentosyöttöominaisuus
RouterLinkActive-komenton elinkaari
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive -luokka
RouterLinkActive -luokka
RouterLinkActive -luokka
|
Edellinen:Täällä on todella hyvä toiminto, voit tienata rahaa, se on promootio.Seuraava:Julkaissut DZ-verkkomaksusopimuksettoman lisäosan, joka on saatavilla henkilökohtaiseen testaukseen.
|
