|
|
Publié sur 25/10/2018 15:52:29
|
|
|
Introduction aux commandes RouterLink
La commande RouterLink vous permet de vous connecter à une partie spécifique de votre application. Si le lien est statique, nous pouvons utiliser la commande de la manière suivante :
Si vous devez générer des adresses de lien avec des valeurs dynamiques, vous pouvez passer un tableau de segments de chemin puis les paramètres de chaque segment. Par exemple, utiliser un tableau composé de ['/team', teamId, 'user', userName, {details : true}] signifie que nous voulons générer un lien vers /team/11/user/bob ; détails=vrai 。
Plusieurs segments statiques peuvent être fusionnés en un seul, par exemple ['/équipe/11/utilisateur', userName, {details : true}].
Le premier fragment de chemin peut être défini comme /, ./ ou . / Début :
- Si ça commence par /, la route commencera à regarder vers le haut depuis la racine
- Si elle commence par ./ ou n’est pas utilisée, la route commencera à remonter depuis la route enfant actuellement active pour la route
- Si vous commencez par : / commence, la route passe au niveau suivant de recherche
Vous pouvez définir les paramètres de requête et les fragments de la manière suivante :
La commande RouterLink générera le lien suivant en fonction des paramètres d’entrée définis ci-dessus : /user/bob#education ?debug=true. De plus, nous pouvons déclarer comment gérer les paramètres de requête via la propriété queryParamsHandlinging, les options disponibles sont :
- merge - Fusionner les queryParams existantes dans les queryParams courantes
- preserve - Sauvegarder les requêtes actuelles
- par défaut ('') - Utiliser uniquement les paramètres de requête
Voici les exemples d’utilisation spécifiques :
Commande RouterLink expliquée en détail
Définition de la commande RouterLink
Propriété d’entrée de commande RouterLink
Définir les paramètres de requête liés à l’URL
@Input() queryParams : {[k : chaîne] : any} ;
Définissez le fragment de hachage sur l’URL
@Input() fragment : ficelle ;
Définir le mode de traitement des paramètres de requête : fusionner, préserver et par défaut
@Input() queryParamsHandling : QueryParamsHandling ;
Définit s’il faut conserver les fragments
@Input() conserveFragment : booléen ;
Lors de la configuration de la navigation de la page, pour savoir s’il faut ajouter de nouveaux statuts à l’historique
@Input() skiplocatio{filter}nChange : boolean ;
Lors de la configuration de la navigation de la page, s’il faut remplacer l’état actuel dans l’historique
@Input() replaceUrl : boolean ;
Définir les informations des paramètres des commandes, par exemple : ['/utilisateur/bob']
@Input()
set routerLink(commandes : any[]|string) {
if (commandes != null) {
this.commands = Array.isArray(commandes) ? commandes : [commandes] ;
} else {
this.commands = [] ;
}
}
Liaison par commande RouterLink
Liaison d’événements
Classe RouterLink
@Attribute()
@Attribute('attributeName') décorateur : Utilisé pour obtenir la valeur de l’attribut correspondant au nom de l’attribut Name sur l’élément hôte de commande.
tabindex
La propriété tabindex spécifie l’ordre de contrôle de la touche tab d’un élément (lorsque la touche tab est utilisée pour la navigation).
Les éléments suivants prennent en charge les attributs tabindex : <a>, <area><button>, <input><object><select> , , , , et <textarea> .
Syntaxe tabindex :
Classe RouterLink
Classe RouterLink
Commande RouterLinkWithHref
Directive RouterLinkWithHref
Propriété d’entrée directive RouterLinkWithHref
Commande RouterLinkWithHref
Liaison par attributs
Les <a> balises définissent des hyperliens utilisés pour relier d’une page à une autre. <a> Il y a deux attributs importants dans les tags :
href - spécifie l’adresse URL de la page vers laquelle le lien mène. Si vous n’utilisez pas l’attribut href, vous ne pouvez pas utiliser les attributs suivants : download, media, rel, target et type.
Cible - spécifie comment la page liée s’ouvre dans la fenêtre du navigateur, et ses valeurs de paramètres sont principalement les suivantes :
_blank - Chargez le document cible dans une nouvelle fenêtre du navigateur.
_parent - Cet objectif fait que le document se charge dans la fenêtre parent ou l’ensemble de trames contenant le cadre référencé par l’hyperlien. Si cette référence se trouve dans une fenêtre ou dans un cadre de haut niveau, alors elle est équivalente à la _self cible.
_self - La valeur de cette cible est la cible par défaut pour toutes les étiquettes qui ne spécifient pas de <a> cible , ce qui fait que le document cible est chargé et affiché comme document source dans la même trame ou fenêtre. Cette cible est redondante et inutile sauf <base> si elle est utilisée avec l’attribut cible dans l’onglet titre du document.
_top - Cet objectif fait charger le document de la fenêtre contenant l’hyperlien, et en utilisant la cible _top, on efface toutes les trames incluses et on charge le document dans toute la fenêtre du navigateur.
Liaison d’événements
MouseEvent représente un événement qui se produit lorsqu’un utilisateur interagit avec un dispositif pointeur (comme une souris), et les événements courants incluent : les événements click, dblclick, mouseup et mousedown. L’objet MouseEvent contient un attribut bouton qui représente le bouton de la souris pressé par l’utilisateur, et les valeurs possibles de l’attribut sont les suivantes :
- 0 - Le bouton principal est pressé, généralement en référence au bouton gauche de la souris.
- 1 - Le bouton auxiliaire est pressé, généralement en référence à la molette de la souris.
- 2 - La deuxième touche est pressée, en référence généralement au bouton droit de la souris.
- 3 - Le quatrième bouton est pressé, faisant généralement référence au bouton retour du navigateur.
- 4 - Le cinquième bouton est pressé, faisant généralement référence au bouton d’avance du navigateur.
Pour une souris configurée pour un usage gaucher, les frappes seront inversées. Dans ce cas, la valeur est lue de droite à gauche. Dans le code d’exemple ci-dessus, nous accédons également aux propriétés ctrlKey et metaKey de l’objet MouseEvent, qui contiennent les propriétés altKey et shiftKey en plus de ces deux propriétés. Ces attributs sont décrits ci-dessous :
- MouseEvent.ctrlKey - revient true si la touche contrôle est pressée lors du déclenchement de l’événement de la souris.
- MouseEvent.metaKey - renvoie true si la touche (Window - ⊞, Mac - ⌘ Command) est pressée lorsque l’événement de la souris est déclenché.
- MouseEvent.altKey - Retourne la touche true lorsque l’événement de la souris est déclenché si la touche (Window - alt, Mac - Option, ou ⌥ ) est pressée.
- MouseEvent.shiftKey - Retour vrai si la touche majus est pressée lors du déclenchement d’un événement de souris.
Si vous appuyez sur ctrlKey puis cliquez sur l’onglet, une <a> nouvelle page d’onglet sera créée avec l’adresse URL actuelle. Si vous appuyez sur metaKey puis cliquez sur <a> l’onglet, la page actuelle sera rafraîchie. Par conséquent, dans la méthode onClick(), le jugement correspondant est effectué.
Cycle de vie des commandes RouterLinkWithHref
ngOnChanges()
ngOnDestroy()
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Classe RouterLinkWithHref
Introduction à la commande RouterLinkActive
La directive RouterLinkActive vous permet d’ajouter des classes CSS à un élément lorsque la route liée devient active. Regardez l’exemple suivant :
Lorsque l’adresse URL est /user ou /user/bob, la classe active-link sera <a> ajoutée à l’étiquette. Si l’URL change, la classe lien-actif est automatiquement supprimée de <a> l’étiquette. Vous pouvez également ajouter plusieurs classes en même temps, comme suit :
Lors de l’application de la commande routerLinkActive, vous pouvez également utiliser le paramètre routerLinkActiveOptions pour configurer la correspondance des URL, comme suit :
Lorsque le paramètre {exact : true} est configuré, la classe d’active link n’est ajoutée à l’étiquette que si l’adresse URL correspond <a> exactement à . Vous pouvez également assigner une instance RouterLinkActive à une variable modèle et vérifier le statut isActive des directives de commande :
Enfin, vous pouvez aussi appliquer la commande RouterLinkActive à l’élément parent du RouterLink. Exemples :
Dans l’exemple ci-dessus, lorsque l’URL est adressée en /user/jim ou /user/bob, la classe active-link est <div> ajoutée à l’élément correspondant.
Commande RouterLinkActive expliquée en détail
Définition de la commande RouterLinkActive
Propriété d’entrée de commande RouterLinkActive
Cycle de vie des commandes RouterLinkActive
ngAfterContentInit()
ngOnChanges()
ngOnDestroy()
Classe RouterLinkActive
Classe RouterLinkActive
Classe RouterLinkActive
|
Précédent:Il y a ici une fonction vraiment bonne, on peut gagner de l’argent, c’est la promotion.Prochain:A publié un plugin de paiement en ligne DZ sans contrat, disponible pour des tests personnels.
|
