février 8, 2022

Navigation dans l'application dans le fichier de composant angulaire

Aujourd'hui, nous construisons un composant de navigation simple pour illustrer le concept de routage, en savoir plus sur les liens de routeur et comprendre comment configurer le routage par programme dans le fichier de composant angulaire.

Dans l'autre routeur postsnous avons examiné la configuration du routage à l'intérieur du modèle. Aujourd'hui, nous nous penchons davantage sur les liens de routeur et sur la configuration de la navigation dans le fichier de composant. processus n'est pas supposé. Voici quelques prérequis que vous devriez avoir pour pouvoir suivre la démonstration de cet article :

Un environnement de développement intégré comme VS Code
Node version 11.0 installé sur votre machine
Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
Angular CLI version 8.0 ou supérieure
Une version récente d'Angular (ce message utilise la version 12)

D'autres avantages incluent :

Connaissances pratiques du framework Angular à un niveau débutant

Routage dans Angular

Il existe plusieurs façons de configurer le routage dans Angular. Nous avons vu comment le faire directement dans le modèle. Maintenant, comment gérez-vous le routage pour des éléments tels que les clics de bouton par programmation dans le fichier de composant ?

Il est recommandé de laisser la présentation aussi propre que possible et de faire en sorte que la logique réside dans le fichier de composant, et nous allons voir comment nous pouvons y parvenir dans Angular.

Ce que nous construisons

Ouvrez le terminal de votre VS Code dans un dossier de votre choix et clonez ce projet de modèle à partir du article précédent.

clone git [https://github.com/viclotana/ngRouter_Template](https://github.com/viclotana/ngRouter_Template )
cd ngRouter_template

Naviguez maintenant dans le nouveau dossier :

cd ngRouter_template

Ouvrez le terminal et exécutez la commande d'installation du module de nœud :

npm install

Configuration

Ouvrez le fichier about component.html et remplacez le contenu par le bloc de code ci-dessous.

<p>À propos de nous</ p>
<div classe="carte">
    <img src="https://cdn.cnn.com/cnnnext/dam/assets/201030094143-stock-rhodesian-ridgeback-exlarge-169 .jpg" alt="Avatar" styleth="th="th="th=" ] :100 %">
    <div classe="conteneur">
      <h4><b>Oncle Joe !</b>[1965] 19659029]</h4>
      <p>Race Boxer, Royaume-Uni</p>
      <p>Âge : 4</p>
      <bouton type="bouton" classe=""[194590] btn-lg">Contactez-nous</bouton>
    </div>
  </div>

Dans le fichier component.css, ajoutez également les règles suivantes :

.card {
    box-shadow : 0 4px 8px 0 rgba(0,0,0,,0, ]) ;
    transition : 0,3s ;
    largeur : contenu max ;[19]65107 ].card :hover {
    box-shadow : 0 8px 16px [1945[9032]0 19659096]rgba(0,0,0,0.2)0;;; .container {
    rembourrage : 2px 16px ;
  }

La page À propos ressemble à ceci :

La page À propos de nous contient l'image d'un chien, Oncle Joe !, Boxer Breed, Royaume-Uni, Âge : 4.

Liens du routeur

Les liens de routeur nous aident à garantir que l'application et les routes sont chargées de la manière la plus efficace, en évitant le rechargement de l'ensemble de l'application à chaque fois qu'il y a une nouvelle interaction. Votre fichier app component.html ressemble à ceci :

<div class="container">
<ul class="nav justifier-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="0" ]page" href="/">Accueil</[1945] 19659027]>
  </li>
  <li class="nav-item">
    <a class="nav-link" href=""""" ">À propos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="""" ">Contacter</a>
  </li>
</ul>
<routeur-prise></routeur-prise>
</div>

Pour l'instant, chaque clic recharge l'application et ce n'est pas génial. Pour changer cela, nous remplaçons la balise href par le lien du routeur.

<div class="container">[19659028]
<ul class="nav justifier-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="0" ]page" href="/">Accueil</[1945] 19659027]>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="0""0" ">À propos</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLink="0"0"0 ">Contacter</a>
  </li>
</ul>
<routeur-prise></routeur-prise>
</div>

Maintenant, cette application est désormais considérée comme une application monopage (SPA).

Routes dans TypeScript

Maintenant, avec cette configuration, allons un peu plus loin pour apprendre à le faire aussi dans notre composant fichier en faisant le lien retour que nous avons dans notre page À propos, accédez à la page Contact lorsque vous cliquez dessus. La première chose à faire est de configurer un gestionnaire d'événements sur le bouton que nous avons déjà. 19659028]
<div classe="carte">
<img src="https://cdn.cnn.com/cnnnext/dam/assets/201030094143-stock-rhodesian-ridgeback-exlarge-169 .jpg" alt="Avatar" styleth="th="th="th=" ] :100 %">
<div classe="conteneur">
<h4><b>Oncle Joe !</b>[1965] 19659029]</h4>
<p>Race Boxer, Royaume-Uni</p>
<p>Âge : 4</p>
<bouton type="bouton" classe=""[194590] btn-lg"
(cliquez)='navigateFunction()'>Contactez-nous</bouton> 19659028]
</div>
</div>

La fonction de navigation est la méthode que nous voulons appeler une fois que quelqu'un clique sur le bouton. Dans le fichier de composant about, voici comment configurer le routage :

import { Component, OnInit } from '@angular/ core' ;
import { Routeur } from '@angular/router' ;
@Composant({
  selector : 'app-about',
  templateUrl : './about.component.html',
  styleUrls : ['./about.component.css']
})
export class AboutComponent implémente 19659374] Oninit   {
 Constructeur  ([19459380] Routeur privé :  Routeur )   { } 
 Ngoninit  () : annuler {
  }
navigateFunction(){
    cette route...naviguerParUrl('/contact');
  }
}

La première chose que nous avons faite a été d'importer le routeur et d'injecter le routeur dans le constructeur. Nous avons utilisé l'approche de navigation par URL. Le routeur a également une autre façon de faire cela. (['/contact'])
}

Les deux approches aboutissent au même résultat. Avec l'option de tableau, vous pouvez ajouter d'autres paramètres.

Style de lien de routeur

Le lien de routeur a quelques options intéressantes, dont l'une s'appelle l'option routerLinkActive. Avec cela, vous pouvez attribuer une classe à un lien de routeur actif et Angular lui applique les styles correspondants. Avec notre application, ajoutons la couleur rose et soulignons les liens afin que les utilisateurs puissent facilement identifier la vue dans laquelle ils se trouvent actuellement.

La première chose à faire est le style. Ouvrez le fichier app component.css et ajoutez ces règles :

.active {
    text-decoration : underline ;
    background-color[19659027] : rose vif ;
  }

La prochaine chose est d'ajouter l'option active de lien de routeur à nos routes afin que le résultat souhaité soit affiché. ">
<ul class="nav justifier-content-center">
<li class="nav-item">
<a class="nav-link " aria-current="0 page" href="/">Accueil</[194590] ]>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="0""0" " routerLinkActive='actif'>À propos</[196590]</</[196590] >
</li>
<li class="nav-item">
<a class="nav-link" routerLink="0"0"0 "
routerLinkActive='actif'>Contact</a>[1965]
</li>
</ul>
<routeur-prise></routeur-prise>
</div>

Enregistrez tous les fichiers dans VS Code et ouvrez le terminal. Exécutez cette commande ci-dessous pour exécuter l'application sur le serveur de développement à partir d'Angular.

ng serve

Maintenant, votre navigateur devrait ressembler à ceci lorsque vous visitez localhost :4200 :

Source link

Blog ARC Optimizer

février 8, 2022

Navigation dans l'application dans le fichier de composant angulaire

Routage dans Angular

Ce que nous construisons

Configuration

Liens du routeur

Routes dans TypeScript

Style de lien de routeur

Articles similaires

Blog ARC Optimizer

Routage dans Angular

Ce que nous construisons

Configuration

Liens du routeur

Routes dans TypeScript

Style de lien de routeur

Partager :

Articles similaires