Winkel-4 - Aktivierten Route mit param

Ihre Routen sind gut definiert. Aber Sie haben 3 Grundlagen Möglichkeiten der Umleitung: href, routerLink und router.navigieren Sie.

Die klassische href-Eigenschaft in einem HTML-Anker-tag

Dieser ist außerhalb Winkel-Steuerung. In der Vorlage (html-Datei) Ihre Element Liste Komponente, die Sie hinzufügen könnte, die einfache html-Anker-tag:

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

Aber, denn auf diese Weise wird außerhalb der Winkel-Steuerelement verwenden, sollten Sie diese Lösung vielleicht für außerhalb perdurable statische urls. Wie eine Google-Seite, Facebook-Seite, etc..

Also, in diesem Szenario: Der Benutzer interagiert mit Ihrem DOM und Ihrem DOM wird ein Ereignis ausgelöst Herstellung Ihrer browser umleiten.

Mit routerLink Attribut

Diese Lösung erfordert die RouterModule importiert, die in irgendeiner Weise an den tatsächlichen ngModule zu arbeiten. Die einfachste Möglichkeit, um dies zu tun, in Ihrem Haupt-Modul (Allgemein app.- Modul.ts) sollten Sie brauchen, um hinzuzufügen:

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

Und fügen Sie RouterModule innerhalb der Importe array in Ihrem @NgModule Dekorateur.

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

Dann in der Vorlage Ihrer ItemListComponent, könnten Sie den Verweis auf ein statischen Pfad, oder generieren eine dynamisch.

Verweisen Sie einen statischen Pfad ein, Sie müssen nur noch die routerLink Attribut mit Ihrem Pfad als Wert:

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

Hinweis: <...></...> bedeutet, dass das tag, das Sie verwenden, spielt überhaupt keine Rolle, wenn seine gerendert in Ihre Seite ein.

Zum Verweis auf eine generierte link, zum Beispiel model/item/4 zu können, müssen Sie die routerLink Attribut als Eingang (Zwischen []), und einer Vielzahl von Pfad-Segmente, die enthält jedes segment in einer sequencial Reihenfolge:

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

Wird Element eine barrierearm Objekt auf Ihre Vorlage (public Variablen innerhalb der Klasse Komponente ODER eine deklarierte variable in der Vorlage wie mit *ngFor="let item of items") mit einem id als Eigenschaft.

Hinweis: Man könnte das vereinfachen, dass link mit [routerLink]="['/model/item', item.id]", weil /model/item ist statische in der url.

Also, in diesem Szenario: Der Benutzer interagiert mit Ihrem DOM, Ihren DOM nennen die RouterModule, und diese Letzte wird Ende der Suche, für ein Spiel innerhalb Ihrer Routen machen Winkel umleiten.

Mit der Methode navigieren Sie von der Router-Klasse.

Diese Lösung nachholen erfordert die Router importiert und injiziert in der Komponente, die Sie behandeln möchten, die route (ItemListComponent in diesem Fall - ItemList.Komponente.ts - Datei).

Importieren der Router, fügen Sie diese:

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

Um es zu injizieren; fügen Sie die Konstruktor:

constructor(private router: Router) {}

Fügen Sie dann die Methode, die Sie behandeln möchten die Umleitung Ihrer Klasse, wie die, die Sie Hinzugefügt:

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

Und schließlich sollten Sie hinzufügen müssen, um in Ihrem Vorlage eine Veranstaltung, die die Funktion aufrufen. Zum Beispiel:

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

Also, in diesem Szenario: Der Benutzer interagiert mit Ihrem DOM, Ihren DOM feuert ein Ereignis, das ausgelöst wird, eine Methode der Klasse, die die Methode aufrufen navigieren von Router - Klasse, die Ende Suche endlich für ein match innerhalb Ihrer Routen machen Winkel umleiten.

InformationsquelleAutor Francute

bitte versuchen Sie dieses:

diese.router.navigieren(['Punkt'+item.id]);

InformationsquelleAutor Kinnera Reddy