|
|
Postat pe 25.10.2018 15:52:29
|
|
|

Introducere în comenzile RouterLink
Comanda RouterLink îți permite să te conectezi la o anumită parte a aplicației tale. Dacă legătura este statică, putem folosi comanda în următorul mod:
Dacă trebuie să generezi adrese de legătură cu valori dinamice, poți transmite un tablou de segmente de traseu și apoi parametrii fiecărui segment. De exemplu, folosirea unui tablou format din ['/team', teamId, 'user', userName, {details: true}] înseamnă că vrem să generăm un link către /team/11/user/bob; detalii=true 。
Mai multe segmente statice pot fi combinate într-unul singur, de exemplu ['/team/11/user', userName, {details: true}].
Primul fragment de cale poate fi definit ca /, ./ sau . / Începutul:
- Dacă începe cu /, traseul va începe să se uite în sus față de traseul rădăcină
- Dacă începe cu ./ sau nu este folosită, ruta va începe să se uite în sus față de ruta copil care este activă în prezent pentru rută
- Dacă începi cu: / începe, traseul trece la următorul nivel de căutare
Poți seta parametrii interogării și fragmentele în următoarele moduri:
Comanda RouterLink va genera următorul link pe baza parametrilor de intrare setați mai sus: /user/bob#education?debug=true. În plus, putem declara cum să gestionăm parametrii de interogare prin proprietatea queryParamsHanding, opțiunile disponibile sunt:
- merge - Îmbină interogatorii existenți în interogatorii actuali
- preserve - Salvează interogările curente
- implicit ('') - Folosește doar parametrii de interogare
Exemple specifice de utilizare sunt următoarele:
Comanda RouterLink explicată în detaliu
Definiția comenzii RouterLink
Proprietatea de intrare a comenzilor RouterLink
Setează parametrii de interogare legați de URL @Input() queryParams: {[k: string]: any};
Setează fragmentul de hash pe URL @Input() fragment: sfoard;
Setează modul de procesare a parametrilor de interogare: merge, preserve și implicit @Input() queryParamsHandling: QueryParamsHandling;
Setează dacă trebuie păstrate fragmentele @Input() conserveFragment: boolean;
Când setezi navigarea pe pagină, dacă să adaugi noi statusuri în istoric @Input() skiplocatio{filter}nChange: boolean;
În timp ce setezi navigarea paginii, dacă să înlocuiești starea curentă din istoric @Input() înlocuireUrl: boolean;
De exemplu, setarea comenzilor despre parametri: ['/user/bob'] @Input() set routerLink(commands: any[]|string) { dacă (comenzi != null) { this.commands = Array.isArray(comenzi) ? comenzi: [comenzi]; } altfel { this.commands = []; }
}
Legarea comenzilor RouterLink
Legarea evenimentelor
Clasa RouterLink
@Attribute() @Attribute('attributeName') decorator: Folosit pentru a obține valoarea atributului corespunzător numelui atributului pe elementul command host.
tabindex Proprietatea tabindex specifică ordinea de control a tastei tab a unui element (atunci când tasta tab este folosită pentru navigare).
Următoarele elemente suportă atribute tabindex: <a>, <area><button>, <input><object><select> , , , , , și <textarea> .
Sintaxa tabindex:
Clasa RouterLink
Clasa RouterLink
Comanda RouterLinkWithHref
Directiva RouterLinkWithHref
Proprietatea de intrare a directivei RouterLinkWithHref
Comanda RouterLinkWithHref
Legarea atributelor
<a> Etichetele definesc hyperlinkuri care sunt folosite pentru a face legătura de la o pagină la alta. <a> Există două atribute importante în tag-uri:
href - specifică adresa URL a paginii către care duce linkul. Dacă nu folosești atributul href, nu poți folosi următoarele atribute: download, media, rel, target și type.
Target - specifică modul în care se deschide pagina legată în fereastra browserului, iar valorile parametrilor sunt în principal următoarele:
_blank - Încarcă documentul țintă într-o fereastră nouă de browser.
_parent - Acest scop face ca documentul să se încarce în fereastra părinte sau setul de cadre care conține cadrul referențiat de hyperlink. Dacă această referință se află într-o fereastră sau într-un cadru de nivel superior, atunci este echivalentă cu _self țintă.
_self - Valoarea acestei ținte este ținta implicită pentru toate etichetele care nu specifică o <a> țintă , ceea ce face ca documentul țintă să fie încărcat și afișat ca document sursă în același cadru sau fereastră. Această țintă este redundantă și inutilă decât <base> dacă este folosită împreună cu atributul țintă din fila de titlu a documentului.
_top - Acest scop face ca documentul să încarce fereastra care conține hyperlink-ul, iar folosirea _top țintă va șterge toate cadrele incluse și va încărca documentul în întreaga fereastră a browserului.
Legarea evenimentelor
MouseEvent reprezintă un eveniment care apare atunci când un utilizator interacționează cu un dispozitiv pointer (cum ar fi un mouse), iar evenimentele comune includ: click, dblclick, mouseup și mousedown. Obiectul MouseEvent conține un atribut de buton care reprezintă butonul mouse-ului apăsat de utilizator, iar valorile posibile ale atributului sunt următoarele:
- 0 - Se apasă butonul principal, de obicei referindu-se la butonul stâng al mouse-ului.
- 1 - Butonul auxiliar este apăsat, de obicei referindu-se la rotița mouse-ului.
- 2 - A doua tastă este apăsată, de obicei referindu-se la butonul drept al mouse-ului.
- 3 - Se apasă al patrulea buton, de obicei referindu-se la butonul de întoarcere al browserului.
- 4 - Se apasă al cincilea buton, de obicei referindu-se la butonul de avansare al browserului.
Pentru un mouse configurat pentru utilizare stânga, apăsările de taste vor fi opusul. În acest caz, valoarea se citește de la dreapta la stânga. În codul exemplu de mai sus, accesăm și proprietățile ctrlKey și metaKey ale obiectului MouseEvent, care conțin proprietățile altKey și shiftKey pe lângă aceste două proprietăți. Aceste atribute sunt descrise mai jos:
- MouseEvent.ctrlKey - returnează true dacă tasta control este apăsată când evenimentul mouse-ului este declanșat.
- MouseEvent.metaKey - returnează adevărat dacă tasta (Window - ⊞, Mac - ⌘ Command) este apăsată când evenimentul mouse-ului este declanșat.
- MouseEvent.altKey - Revine cu adevărat când este declanșat evenimentul mouse-ului dacă tastele (Window - alt, Mac - Option sau ⌥ ) sunt apăsate.
- MouseEvent.shiftKey - Returnează true dacă tasta shift este apăsată când se declanșează un eveniment de mouse.
Dacă apeși ctrlKey și apoi dai click pe tab, <a> o pagină nouă de tab va fi creată folosind adresa URL curentă. Dacă apeși metaKey și apoi dai click pe <a> filă, pagina curentă va fi reîmprospătată. Prin urmare, în metoda onClick(), se execută judecata corespunzătoare.
Ciclul de viață al comenzilor RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Clasa RouterLinkWithHref
Clasa RouterLinkWithHref
Clasa RouterLinkWithHref
Introducere în comanda RouterLinkActive
Directiva RouterLinkActive îți permite să adaugi clase CSS unui element atunci când ruta legată devine activă. Aruncă o privire la următorul exemplu:
Când adresa URL este /user sau /user/bob, clasa active-link va fi adăugată <a> la etichetă. Dacă URL-ul se schimbă, clasa active-link este eliminată automat din <a> etichetă. Poți adăuga și mai multe clase simultan, după cum urmează:
Când aplici comanda routerLinkActive, poți folosi și parametrul routerLinkActiveOptions pentru a configura cum sunt potrivite URL-urile, după cum urmează:
Când parametrul {exact: true} este configurat, clasa legăturii active este adăugată la etichetă doar dacă adresa URL corespunde <a> exact . De asemenea, poți atribui o instanță RouterLinkActive unei variabile șablon și verifica starea isActive a directivelor de comandă directiv:
În final, poți aplica și comanda RouterLinkActive elementului părinte al RouterLink. Exemple includ:
În exemplul de mai sus, când URL-ul este adresat ca /user/jim sau /user/bob, clasa active-link este adăugată <div> elementului corespunzător.
Comanda RouterLinkActive explicată în detaliu
Definiția comenzii RouterLinkActive
Proprietatea de intrare a comenzii RouterLinkActive
Ciclul de viață al comenzilor RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Clasa RouterLinkActive
Clasa RouterLinkActive
Clasa RouterLinkActive
|
Precedent:Există o funcție aici care este foarte bună, poți face bani, este promovarea.Următor:Am lansat un plugin DZ online de plată fără contract, disponibil pentru testare personală.
|