Angulaire 4 - Route Activée avec param

Vos routes sont bien définis. Mais vous avez 3 principes de base des moyens de redirection: href, routerLink et routeur.naviguer.

---

Le classique href propriété dans une balise d'ancrage HTML

Celui-ci est à l'extérieur Angulaire de contrôle. Dans le modèle (fichier html) de votre Élément Liste composant vous pouvez ajouter la simple ancrage balise html:

<a href="...an static url..">Text of this link</a>

Mais, parce que de cette façon est à l'extérieur Angulaire de contrôle, vous devez utiliser cette solution peut-être pour l'extérieur perdurable statique url. Comme une Page Google, Facebook, Page, etc.

Donc, dans ce scénario: L'utilisateur interagit avec votre DOM et votre DOM va déclencher un événement à faire de votre navigateur de vous rediriger.

À l'aide de routerLink attribut

Cette solution nécessite la RouterModule importés en quelque sorte à votre ngModule de travail. La façon la plus simple pour ce faire, dans votre module principal (Communément app.le module.ts) vous avez besoin d'ajouter:

import { RouterModule } from '@angular/router';

Et ajouter RouterModule à l'intérieur de la importations de tableau dans votre @NgModule décorateur.

@NgModule({
  ...,
  imports: [
    ....,
    RouterModule,
    ....
  ],
  ...
})

Puis dans le modèle de votre ItemListComponent, vous pourriez référence à un chemin d'accès statique, ou générer dynamiquement d'un.

Pour faire référence à un chemin d'accès statique, vous devez seulement ajouter de la routerLink attribut avec votre chemin, comme une valeur:

<... routerLink="/item">If you click this element, you will be redirected to ItemListComponent</...>

Remarque: <...></...> signifie que la balise que vous utilisez ne importe pas si sa le rendu de votre page.

Pour faire référence à un lien généré, par exemple model/item/4, vous devez ajouter le routerLink attribut comme un entrée (Entre []), et un tableau de segments du chemin qui contient chaque segment dans un sequencial ordre:

<... [routerLink]="['/model', 'item', item.id]">...</...>

Être élément un accesible objet sur votre modèle (variable publique à l'intérieur de la classe composant OU une variable déclarée dans le modèle comme l'utilisation de *ngFor="let item of items") avec un id comme une propriété.

Remarque: Vous pouvez simplifier ce lien à l'aide de [routerLink]="['/model/item', item.id]", parce que /model/item est statique dans l'url.

Donc, dans ce scénario: L'utilisateur interagit avec votre DOM, votre DOM fera appel à la RouterModule, et ce dernier se mettra fin à la recherche d'un match à l'intérieur de vos itinéraires de faire Angulaire de vous rediriger.

À l'aide de la méthode de naviguer à partir de Routeur de classe.

Cette solution aditionally nécessite la Routeur importés et injecté dans le composant que vous souhaitez gérer le parcours (ItemListComponent dans ce cas - ItemList.composante.ts fichier).

Pour importer le Routeur, ajouter ceci:

import { Router } from '@angular/router';

À injecter; ajouter à la constructeur:

constructor(private router: Router) {}

Ensuite, ajouter le méthode vous souhaitez gérer la redirection dans votre classe, comme celui que vous avez ajouté:

goToDetail(item) {
    this.router.navigate(['/item', item.id]);
}

Et enfin, vous devez ajouter dans votre modèle un événement qui fera appel à votre fonction. Par exemple:

<... (click)="goToDetail(item)">...</...>

Donc, dans ce scénario: L'utilisateur interagit avec votre DOM, votre DOM déclenche un événement qui va déclencher une méthode de la classe qui va appeler la méthode naviguer de Routeur classe, qui prendra fin à la recherche, enfin, pour un match à l'intérieur de vos itinéraires de faire Angulaire de vous rediriger.

OriginalL'auteur Francute

s'il vous plaît essayez celui-ci:

.routeur.naviguer(['item'+item.id]);

OriginalL'auteur Kinnera Reddy