|
|
Közzétéve 2018. 10. 25. 15:52:29
|
|
|
Bevezetés a RouterLink parancsokhoz
A RouterLink parancs lehetővé teszi, hogy csatlakozz az alkalmazás egy adott részéhez. Ha a link statikus, a parancsot a következőképpen használhatjuk:
Ha dinamikus értékű linkcímeket kell generálni, akkor átadhatsz egy útvonalszegmensekből álló tömböt, majd minden szegmens paramétereit. Például egy tömb ['/team', teamId, 'user', userName, {details: true}] használatával azt jelenti, hogy linket szeretnénk generálni a /team/11/user/bob-ra; részletek=igaz 。
Több statikus szegmens egyesíthető egybe, például ['/team/11/user', userName, {details: true}].
Az első úttöredék definálható /, ./, vagy . / Kezdet:
- Ha /-val kezdődik, az útvonal elkezd felfelé nézni a gyökérútvonaltól
- Ha ./ vagy nem használatos, az útvonal elkezd felfelé nézni a jelenleg aktív gyermek útvonalból
- Ha azzal kezded: / kezdődik, az útvonal a következő keresési szintre megy
A lekérdezési paramétereket és fragmentumokat a következőképpen állíthatod be:
A RouterLink parancs a fent beállított bemeneti paraméterek alapján a következő linket generálja: /user/bob#education?debug=true. Ezen felül a queryParamsHandling tulajdonságon keresztül bejelenthetjük, hogyan kezeljük a lekérdezési paramétereket, a rendelkezésre álló opciók a következők:
- merge - Egyesítsd a meglévő queryParams-okat a jelenlegi queryParams-szal
- preserve - Mentse el a jelenlegi queryParam-okat
- alapértelmezett ('') - Csak lekérdezési paramétereket használj
Konkrét használati példák a következők:
A RouterLink parancs részletesen elmagyarázza
RouterLink parancs definíciója
RouterLink parancs input tulajdonsága
Állítsuk be az URL-hez kapcsolódó lekérdezési paramétereket
@Input() queryParams: {[k: string]: any};
Állítsd be a hash fragmentumot az URL-en
@Input() töredék: húr;
Állítsd be a lekérdezési paraméter feldolgozási módját: merge, preserve és alapértelmezett
@Input() queryParamsHandling: QueryParamsHandling;
Állítja be, hogy megtartsák-e a töredékeket
@Input() megőrzésFragmentum: boolean;
Az oldalnavigáció beállításakor új státuszokat kell hozzáadni a történethez
@Input() skiplocatio{filter}nChange: boolean;
Az oldalnavigáció beállítása közben a jelenlegi állapot cseréje a történetben
@Input() replaceUrl: boolean;
Beállítás parancsokra paraméterinformációkat, például: ['/user/bob']
@Input()
set routerLink(parancsok: any[]|string) {
if (parancsok != null) {
this.commands = Array.isArray parancsok? parancsok: [parancsok];
} más {
this.commands = [];
}
}
RouterLink parancskötés
Eseménykötés
RouterLink osztály
@Attribute()
@Attribute('attributeName') dekorátor: A parancs host elemén lévő attribútumName attribútumnevének értékének megszerzésére szolgál.
tabindex
A tabindex tulajdonság meghatározza egy elem fülbillentyű vezérlősorrendjét (amikor a tab billentyűt használják navigációhoz).
A következő elemek támogatják a tabindex attribútumokat: <a>, <area>, <button>, <input><object><select> , és <textarea> .
Tabindex szintaxis:
RouterLink osztály
RouterLink osztály
RouterLinkWithHref parancs
RouterLinkWithHref direktíva
RouterLinkWithHref direktíva bemeneti tulajdonság
RouterLinkWithHref parancs
attribútumkötés
<a> A címkék olyan hivatkozásokat határoznak meg, amelyeket egy oldalról a másikra való hivatkozásra használnak. <a> Két fontos tulajdonság van a címkékben:
href - megadja annak az oldalnak az URL-címét, amelyre a link vezet. Ha nem használod a href attribútumot, akkor nem használhatod a következő attribútumokat: download, media, rel, target és type attribútumok.
cél - Megadja, hogyan nyílik meg a linkelt oldal a böngészőablakban, és paraméterértékei főként a következők:
_blank - Töltsd be a céldokumentumot egy új böngészőablakban.
_parent - Ez a cél miatt a dokumentum betöltődik a szülőablakba vagy kerethalmazba, amely tartalmazza a hivatkozással hivatkozott keretet. Ha ez a hivatkozás egy ablakban vagy egy felső szintű keretrendszerben van, akkor ekvivalens a célpont _self-vel.
_self - Ennek a célpontnak az alapértelmezett célpontja minden olyan címkénél, amely nem jelöl meg <a> célt , ami miatt a céldokumentum betöltődik és forrásdokumentumként jelenik meg ugyanabban a keretben vagy ablakban. Ez a célpont felesleges és felesleges, hacsak nem <base> használják a dokumentum címfülén lévő célattribútummal.
_top – Ez a cél miatt a dokumentum betölti azt az ablakot, amely tartalmazza a hiperhivatkozást, és a _top célpont használatával minden benne lévő keretet töröl, és betölti a dokumentumot az egész böngészőablakban.
Eseménykötés
A MouseEvent egy olyan eseményt képvisel, amely akkor történik, amikor a felhasználó egy mutatóeszközzel (például egérrel) lép kapcsolatba, és gyakori események közé tartoznak: kattintás, dblclick, egér felhúzás és egérlefelé irányuló események. Az MouseEvent objektum tartalmaz egy gomb attribútumot, amely a felhasználó által megnyomott egérgombot jelöli, és a lehetséges attribútumértékek a következők:
- 0 - A fő gombot megnyomják, általában a bal egérgombra utalva.
- 1 - A segédgombot megnyomják, ami általában az egérkerékre utal.
- 2 - A második billentyűt megnyomjuk, ami általában a jobb egérgombra utal.
- 3 - A negyedik gombot megnyomjuk, ami általában a böngésző vissza gombjára utal.
- 4 - Az ötödik gombot megnyomják, ami általában a böngésző előrehaladó gombjára utal.
Bal kézzel való használatra konfigurált egérnél a billentyűleütések az ellenkezőjét mutatják. Ebben az esetben az értéket jobbról balra olvassuk. A fenti példakódban hozzáférünk a MouseEvent objektum ctrlKey és metaKey tulajdonságaihoz is, amelyek az altKey és shiftKey tulajdonságokat is tartalmazzák ezen tulajdonságok mellett. Ezeket a tulajdonságokat az alábbiakban írjuk le:
- MouseEvent.ctrlKey – akkor true értéket ad, ha a control billentyűt megnyomjuk, amikor az egér eseménye aktiválódik.
- MouseEvent.metaKey - true ad, ha az (Window - ⊞, Mac - ⌘ Command) billentyűt lenyomjuk, amikor az egér esemény aktiválódik.
- MouseEvent.altKey - True jelenik meg, amikor az egér eseménye aktiválódik, ha megnyomják a (Window - alt, Mac - Option vagy ⌥) gombot.
- MouseEvent.shiftKey – True jelenik meg, ha a shift gombot megnyomjuk, amikor egy egéresemény aktiválódik.
Ha megnyomod a ctrlKey gombot, majd rákattintasz a fülre, új <a> tabuloldal jön létre a jelenlegi URL-cím alapján. Ha megnyomod a metaKey-t, majd rákattintasz a <a> fülre, az aktuális oldal frissül. Ezért az onClick() módszerben a megfelelő ítéletet végzik.
RouterLinkWithHref parancs életciklusa
ngOnChanges()
ngOnDestroy()
RouterLinkWithHref osztály
RouterLinkWithHref osztály
RouterLinkWithHref osztály
Bevezetés a RouterLinkActive parancshoz
A RouterLinkActive direktíva lehetővé teszi, hogy CSS osztályokat adj hozzá egy elemhez, amikor a kapcsolt útvonal aktívvá válik. Nézzük meg a következő példát:
Ha az URL-cím /user vagy /user/bob, az aktív link osztály <a> hozzáadódik a címkéhez. Ha az URL megváltozik, az aktív link osztály automatikusan eltávolítódik a <a> címkéről. Több osztályt is hozzáadhatsz egyszerre, az alábbiak szerint:
A routerLinkActive parancs alkalmazásakor a routerLinkActiveOptions paraméterrel is beállíthatod, hogyan egyeztetnek az URL-ek, az alábbiak szerint:
Amikor a {exact: true} paramétert konfiguráljuk, az aktív link osztály csak akkor kerül a címkéhez, ha az URL-cím pontosan <a> egyezik . Rendelhetsz egy RouterLinkActive példányt egy sablonváltozóhoz isActive státuszhoz isActive utasítások státuszát direktívan:
Végül a RouterLinkActive parancsot a RouterLink szülőelemére is alkalmazhatod. Példák:
A fenti példában, amikor az URL címezve /user/jim vagy /user/bob lesz, az aktív link osztály <div> hozzáadódik a megfelelő elemhez.
RouterLinkActive parancs részletesen magyarázatot adott
RouterLinkActive parancs definíció
RouterLinkActive parancs input tulajdonsága
RouterLinkActive parancs életciklusa
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
RouterLinkActive osztály
RouterLinkActive osztály
RouterLinkActive osztály
|
Előző:Van itt egy nagyon jó funkció, pénzt lehet keresni, ez a promóció.Következő:Kiadtam egy DZ online fizetési szerződés nélküli plugint, amely személyes tesztelésre is elérhető.
|
