|
|
Opublikowano 25.10.2018 15:52:29
|
|
|
Wprowadzenie do poleceń RouterLink
Polecenie RouterLink pozwala na połączenie z konkretną częścią aplikacji. Jeśli łącze jest statyczne, możemy użyć polecenia w następujący sposób:
Jeśli musisz generować adresy linków z wartościami dynamicznymi, możesz przekazać tablicę segmentów ścieżek, a następnie parametry dla każdego segmentu. Na przykład, używając tablicy ['/team', teamId, 'user', userName, {details: true}] oznacza, że chcemy wygenerować link do /team/11/user/bob; szczegóły=prawdziwe 。
Wiele statycznych segmentów można połączyć w jeden, np. ['/team/11/user', userName, {details: true}].
Pierwszy fragment ścieżki można zdefiniować jako /, ./ lub . / Początek:
- Jeśli zaczyna się od /, trasa zacznie patrzyć w górę od głównej trasy
- Jeśli zaczyna się od ./ lub nie jest używana, trasa zacznie szukać w górę od ścieżki potomnej, która jest aktywna dla tej trasy
- Jeśli zaczniesz od: / zaczyna się, trasa przechodzi na kolejny poziom wyszukiwania
Możesz ustawić parametry zapytań i fragmenty w następujący sposób:
Polecenie RouterLink wygeneruje następujący link na podstawie powyższych parametrów wejściowych: /user/bob#education?debug=true. Dodatkowo możemy zadeklarować, jak obsługiwać parametry zapytań za pomocą właściwości queryParamsHanding, dostępne opcje to:
- merge - Połączenie istniejących queryParams z aktualnym queryParams
- zachować - Zapisz aktualne zapytanieParams
- domyślne ('') - Używaj tylko parametrów zapytań
Przykłady konkretnego użycia są następujące:
Komenda RouterLink wyjaśniona szczegółowo
Definicja poleceń RouterLink
Własność wejścia polecenia RouterLink
Ustaw parametry zapytania powiązane z adresem URL
@Input() queryParams: {[k: string]: any};
Ustaw fragment skrótu na URL
@Input() fragment: struna;
Ustaw tryb przetwarzania parametrów zapytań: merge, preserve i default
@Input() queryParamsHandling: QueryParamsHandling;
Ustala, czy zachować fragmenty
@Input() preserveFragment: boolean;
Podczas ustawiania nawigacji po stronie, czy dodać nowe statusy do historii
@Input() skiplocatio{filter}nChange: boolean;
Podczas ustawiania nawigacji strony, czy zastąpić obecny stan w historii
@Input() replaceUrl: boolean;
Ustaw informacje o parametrach poleceń, na przykład: ['/user/bob']
@Input()
set routerLink(commands: any[]|string) {
if (commands != null) {
this.commands = Array.isArray(commands) ? komendy: [komendy];
} else {
this.commands = [];
}
}
Powiązanie poleceń RouterLink
Wiązanie zdarzeń
Klasa RouterLink
@Attribute()
@Attribute('attributeName') dekorator: Używany do uzyskania wartości atrybutu odpowiadającej nazwie atrybutu attributeName w elemencie hosta polecenia.
tabindex
Właściwość tabindex określa kolejność sterowania tabulator dla elementu (gdy tabulator jest używany do nawigacji).
Następujące elementy wspierają atrybuty tabindex: <a>, <area>, <button>, <input><object><select> , , , , oraz <textarea> .
Składnia Tabindex:
Klasa RouterLink
Klasa RouterLink
Polecenie RouterLinkWithHref
Dyrektywa RouterLinkWithHref
Własność wejścia dyrektywy RouterLinkWithHref
Polecenie RouterLinkWithHref
Wiązanie atrybutów
<a> Tagi definiują hiperlinki, które służą do łączenia jednej strony z inną. <a> W tagach są dwie ważne cechy:
href - określa adres URL strony, do której prowadzi link. Jeśli nie używasz atrybutu href, nie możesz używać następujących atrybutów: download, media, rel, target oraz type.
Target - określa, jak strona powiązana otwiera się w oknie przeglądarki, a jej wartości parametrów są głównie następujące:
_blank - Załaduj docelowy dokument w nowym oknie przeglądarki.
_parent - Ten cel powoduje, że dokument ładuje się do okna nadrzędnego lub zestawu ramek zawierających ramkę odwoływaną przez hiperłącze. Jeśli to odniesienie znajduje się w oknie lub w ramach najwyższego poziomu, to jest równoważne docelowemu _self.
_self - Wartość tego celu jest domyślnym celem dla wszystkich etykiet, które nie określają celu <a> , co powoduje, że dokument docelowy jest ładowany i wyświetlany jako dokument źródłowy w tej samej ramce lub oknie. Ten cel jest zbędny i zbędny, chyba że <base> użyty jest z atrybutem docelowym w zakładce tytułu dokumentu.
_top - Ten cel powoduje, że dokument ładuje okno zawierające hiperłącze, a użycie celu _top wyczyści wszystkie dołączone ramki i załaduje dokument w całym oknie przeglądarki.
Wiązanie zdarzeń
MouseEvent reprezentuje zdarzenie, które następuje, gdy użytkownik wchodzi w interakcję z urządzeniem wskaźnikowym (takim jak mysz), a typowe zdarzenia to: klik, dblclick, mouseup i mousedown. Obiekt MouseEvent zawiera atrybut przycisku reprezentujący przycisk myszy naciśnięty przez użytkownika, a możliwe wartości atrybutów są następujące:
- 0 - Naciska się główny przycisk, zwykle odnoszący się do lewego przycisku myszy.
- 1 - Naciskany jest przycisk pomocniczy, zwykle odnoszący się do kółka myszy.
- 2 - Naciska się drugi, zwykle odnoszący się do prawego przycisku myszy.
- 3 - Naciska się czwarty przycisk, zwykle odnoszący się do przycisku powrotu przeglądarki.
- 4 - Piąty przycisk jest naciskany, zwykle odnoszący się do przycisku do przodu przeglądarki.
W przypadku myszy skonfigurowanej do użytku leworęcznego, naciśnięcia będą odwrotne. W tym przypadku wartość odczytuje się od prawej do lewej. W przykładowym kodzie powyżej mamy również dostęp do właściwości ctrlKey i metaKey obiektu MouseEvent, które oprócz tych dwóch właściwości zawierają także właściwości altKey i shiftKey. Te cechy opisano poniżej:
- MouseEvent.ctrlKey – zwraca true, jeśli control zostanie naciśnięty podczas wyzwalania zdarzenia myszy.
- MouseEvent.metaKey - zwraca true, jeśli (Window - ⊞, Mac - ⌘ Command) zostanie naciśnięty podczas wyzwalania zdarzenia myszy.
- MouseEvent.altKey - Zwraca true, gdy wywołane zostanie zdarzenie myszy, jeśli naciśniesz (Window - alt, Mac - Option, lub ⌥).
- MouseEvent.shiftKey – Zwraca true, jeśli shift zostanie naciśnięty podczas wyzwalania zdarzenia myszy.
Jeśli naciśniesz ctrlKey, a następnie klikniesz zakładkę, <a> utworzy się nowa strona kart z aktualnym adresem URL. Jeśli naciśniesz metaKey, a następnie klikniesz <a> zakładkę, aktualna strona zostanie odświeżona. Dlatego w metodzie onClick() wykonuje się odpowiednią ocenę.
Cykl życia poleceń RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Klasa RouterLinkWithHref
Klasa RouterLinkWithHref
Klasa RouterLinkWithHref
Wprowadzenie do polecenia RouterLinkActive
Dyrektywa RouterLinkActive pozwala dodawać klasy CSS do elementu, gdy połączona trasa stanie się aktywna. Spójrz na następujący przykład:
Gdy adres URL to /user lub /user/bob, klasa aktywnego linku zostanie <a> dodana do tagu. Jeśli URL się zmieni, klasa aktywnego linku jest automatycznie usuwana z <a> tagu. Możesz też dodać kilka klas jednocześnie, w następujący sposób:
Stosując polecenie routerLinkActive, możesz także użyć parametru routerLinkActiveOptions, aby skonfigurować sposób dopasowywania adresów URL, w następujący sposób:
Gdy parametr {exact: true} zostanie skonfigurowany, klasa aktywnego linku jest dodawana do tagu tylko wtedy, gdy adres URL dokładnie odpowiada <a> . Możesz także przypisać instancję RouterLinkActive do zmiennej szablonowej i dyrektywnie sprawdzić status dyrektyw isActive poleceń:
Na koniec możesz także zastosować polecenie RouterLinkActive do elementu nadrzędnego RouterLink. Przykłady obejmują:
W powyższym przykładzie, gdy adres URL jest adresowany jako /user/jim lub /user/bob, klasa aktywnego linku jest dodawana <div> do odpowiadającego elementu.
Komenda RouterLinkActive wyjaśniona szczegółowo
Definicja polecenia RouterLinkActive
Właściwość wprowadzania poleceń RouterLinkActive
Cykl życia poleceń RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Klasa RouterLinkActive
Klasa RouterLinkActive
Klasa RouterLinkActive
|
Poprzedni:Jest tu funkcja, która jest naprawdę dobra, można zarobić pieniądze, to promocja.Następny:Wydano wtyczkę DZ online payment free contract, dostępną do testów osobistych.
|
