Acest articol este un articol oglindă al traducerii automate, vă rugăm să faceți clic aici pentru a sări la articolul original.

Vedere: 11475|Răspunde: 0

[Unghiular] Comanda Angular 4.x Router Link

[Copiază linkul]
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ă.
Disclaimer:
Tot software-ul, materialele de programare sau articolele publicate de Code Farmer Network sunt destinate exclusiv scopurilor de învățare și cercetare; Conținutul de mai sus nu va fi folosit în scopuri comerciale sau ilegale, altfel utilizatorii vor suporta toate consecințele. Informațiile de pe acest site provin de pe Internet, iar disputele privind drepturile de autor nu au legătură cu acest site. Trebuie să ștergi complet conținutul de mai sus de pe calculatorul tău în termen de 24 de ore de la descărcare. Dacă îți place programul, te rugăm să susții software-ul autentic, să cumperi înregistrarea și să primești servicii autentice mai bune. Dacă există vreo încălcare, vă rugăm să ne contactați prin e-mail.

Mail To:help@itsvse.com