Winkel 2 - Wie navigiere ich mit this.router.parent.navigate ('/ about') zu einer anderen Route?

Winkel 2 - So navigieren Sie mit zu einer anderen Route this.router.parent.navigate('/about').

Es scheint nicht zu funktionieren. Ich habe es versucht, location.go("/about");da das nicht funktioniert hat.

Grundsätzlich möchte ich einen angemeldeten Benutzer auf eine andere Seite umleiten.

Hier ist mein Code unten:

 import {Component} from 'angular2/angular2';
 import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
 import {Router} from 'angular2/router';

 import {AuthService} from '../../authService';

 //Model
 class User {
   constructor(public email: string, public password: string) {}
 }

 @Component({
   templateUrl:'src/app/components/todo/todo.html',
   directives: [CORE_DIRECTIVES, FORM_DIRECTIVES]
 })

 export class Todo {   
     model = new User('[email protected]', 'Password'); 
     authService:AuthService;
     router: Router;

   constructor(_router: Router, _authService: AuthService){   
       this.authService = _authService;
       this.router = _router;
   }

   onLogin = () => {
       this.authService.logUserIn(this.model).then((success) => {      

          //This is where its broke - below:          
          this.router.parent.navigate('/about');

       });
   }
 }

Absolutes Pfad-Routing

Es gibt 2 Methoden zur Navigation: .navigate() und.navigateByUrl()

Sie können die Methode .navigateByUrl()für das absolute Pfadrouting verwenden:

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

constructor(private router: Router) {}

navigateToLogin() {
   this.router.navigateByUrl('/login');
}

Sie geben den absoluten Pfad zur URL der Komponente an, zu der Sie navigieren möchten.

Hinweis: Geben Sie beim Aufrufen der Routermethode immer den vollständigen absoluten Pfad an navigateByUrl. Absolute Pfade müssen mit einem führenden beginnen/

// Absolute route - Goes up to root level    
this.router.navigate(['/root/child/child']);

// Absolute route - Goes up to root level with route params   
this.router.navigate(['/root/child', crisis.id]);

Relative Pfadweiterleitung

Wenn Sie das relative Pfadrouting verwenden möchten, verwenden Sie die .navigate()Methode.

HINWEIS: Es ist etwas unintuitiv, wie das Routing funktioniert, insbesondere die Routen für Eltern, Geschwister und Kinder:

// Parent route - Goes up one level 
// (notice the how it seems like you're going up 2 levels)
this.router.navigate(['../../parent'], { relativeTo: this.route });

// Sibling route - Stays at the current level and moves laterally, 
// (looks like up to parent then down to sibling)
this.router.navigate(['../sibling'], { relativeTo: this.route });

// Child route - Moves down one level
this.router.navigate(['./child'], { relativeTo: this.route });

// Moves laterally, and also add route parameters
// if you are at the root and crisis.id = 15, will result in '/sibling/15'
this.router.navigate(['../sibling', crisis.id], { relativeTo: this.route });

// Moves laterally, and also add multiple route parameters
// will result in '/sibling;id=15;foo=foo'. 
// Note: this does not produce query string URL notation with ? and & ... instead it
// produces a matrix URL notation, an alternative way to pass parameters in a URL.
this.router.navigate(['../sibling', { id: crisis.id, foo: 'foo' }], { relativeTo: this.route });

Oder wenn Sie nur innerhalb des aktuellen Routenpfads navigieren müssen, aber zu einem anderen Routenparameter:

// If crisis.id has a value of '15'
// This will take you from `/hero` to `/hero/15`
this.router.navigate([crisis.id], { relativeTo: this.route });

Link Parameter Array

Ein Link-Parameter-Array enthält die folgenden Bestandteile für die Routernavigation:

• Der Pfad der Route zur Zielkomponente. ['/hero']
• Erforderliche und optionale Routenparameter, die in die Routen-URL eingehen. ['/hero', hero.id]oder['/hero', { id: hero.id, foo: baa }]

Verzeichnisähnliche Syntax

Der Router unterstützt die verzeichnisähnliche Syntax in einer Linkparameterliste, um die Suche nach Routennamen zu erleichtern:

./ oder kein führender Schrägstrich ist relativ zum aktuellen Pegel.

../ im Routenpfad eine Ebene höher gehen.

Sie können die relative Navigationssyntax mit einem Vorfahrenpfad kombinieren. Wenn Sie zu einer Geschwisterroute navigieren müssen, können Sie die ../<sibling>Konvention verwenden, um eine Ebene höher und dann über den Pfad der Geschwisterroute zu gehen.

Wichtige Hinweise zur relativen Nagivierung

Um mit der Router.navigateMethode durch einen relativen Pfad zu navigieren , müssen Sie ActivatedRoutedas angeben, um dem Router mitzuteilen, wo Sie sich im aktuellen Routenbaum befinden.

Fügen Sie nach dem Linkparameter-Array ein Objekt mit einer relativeToEigenschaft hinzu, die auf das festgelegt istActivatedRoute . Der Router berechnet dann die Ziel-URL basierend auf dem Standort der aktiven Route.

Aus der offiziellen Angular Router-Dokumentation

Du solltest benutzen

this.router.parent.navigate(['/About']);

Sie können nicht nur den Routenpfad angeben, sondern auch den Namen Ihrer Route angeben:

{ path:'/About', name: 'About',   ... }

this.router.parent.navigate(['About']);

Kann auch ohne verwenden parent

Sagen Sie Router-Definition wie:

{path:'/about',    name: 'About',   component: AboutComponent}

kann dann vorbei navigieren namestattpath

goToAboutPage() {
    this.router.navigate(['About']); // here "About" is name not path
}

Aktualisiert für V2.3.0

Im Routing von v2.0 ist die Eigenschaft name nicht mehr vorhanden. Route zu definieren , ohne Name - Eigenschaft. Sie sollten also Pfad anstelle von Name verwenden . this.router.navigate(['/path'])und kein führender Schrägstrich für Pfad, also verwenden Sie path: 'about'stattpath: '/about'

Router Definition wie:

{path:'about', component: AboutComponent}

kann dann vorbei navigieren path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}

import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');

Persönlich fand ich, dass ich, da wir eine ngRoutesSammlung pflegen (lange Geschichte), am meisten Freude daran habe:

GOTO(ri) {
    this.router.navigate(this.ngRoutes[ri]);
}

Ich benutze es tatsächlich als Teil einer unserer Interviewfragen. Auf diese Weise kann ich fast sofort nachlesen, wer sich für immer entwickelt hat, indem ich beobachte, wer zuckt, wenn er GOTO(1)auf die Homepage-Umleitung stößt.