Кутовий 2 - Як перейти до іншого маршруту за допомогою this.router.parent.navigate ('/ about')?

Кутовий 2 - Як перейти до іншого маршруту за допомогою this.router.parent.navigate('/about').

Здається, це не працює. Я намагався, location.go("/about");як це не працювало.

В основному після входу користувача я хочу перенаправити їх на іншу сторінку.

Ось мій код нижче:

 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('Mark@gmail.com', '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');

       });
   }
 }

Абсолютна маршрутизація шляху

Існує 2 способи навігації .navigate()та.navigateByUrl()

Ви можете використовувати метод .navigateByUrl()для абсолютної маршрутизації шляху:

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

constructor(private router: Router) {}

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

Ви ставите абсолютний шлях до URL компонента, до якого ви хочете перейти.

Примітка. Під час виклику navigateByUrlметоду маршрутизатора завжди вказуйте повний абсолютний шлях . Абсолютні шляхи повинні починатися з провідних/

// 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]);

Відносна маршрутизація

Якщо ви хочете використовувати відносну маршрутизацію шляху, використовуйте .navigate()метод.

ПРИМІТКА. Дещо маршрутизація маршрутів, зокрема батьківських, рідних та дочірніх маршрутів, трохи неінтуїтивно:

// 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 });

Або якщо вам просто потрібно орієнтуватися в поточному шляху маршруту, але до іншого параметра маршруту:

// 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 });

Масив параметрів зв'язку

Масив параметрів посилання містить наступні інгредієнти для навігації по маршрутизатору:

• Шлях маршруту до компонента призначення. ['/hero']
• Обов’язкові та необов'язкові параметри маршруту, які входять у URL-адресу маршруту. ['/hero', hero.id]або['/hero', { id: hero.id, foo: baa }]

Синтаксис, що нагадує каталог

Маршрутизатор підтримує синтаксис схожий на каталог у списку параметрів посилання, щоб допомогти орієнтуватися у пошуку імені маршруту:

./ або відсутня провідна коса риса відносно поточного рівня.

../ піднятися на один рівень на шляху маршруту.

Ви можете комбінувати відносний синтаксис навігації зі шляху предка. Якщо вам потрібно перейти до маршрутного брата, ви можете скористатись ../<sibling>умовою, щоб піднятися на один рівень, потім переходити через шлях вперед та вниз по маршруту.

Важливі зауваження щодо відносного проростання

Для навігації по відносному шляху з Router.navigateметодом, ви повинні надати, ActivatedRouteщоб дати маршрутизатору знання про те, де ви знаходитесь у поточному дереві маршруту.

Після масиву параметрів посилання додайте об’єкт із relativeToвластивістю, встановленою до ActivatedRoute. Потім маршрутизатор обчислює цільову URL-адресу на основі місцезнаходження активного маршруту.

З офіційної документації кутового маршрутизатора

Ви повинні використовувати

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

Окрім шляху маршруту, ви також можете вказати назву вашого маршруту:

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

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

Також можна використовувати без parent

скажіть визначення маршрутизатора, як:

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

тоді можна переходити nameзамістьpath

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

Оновлено для V2.3.0

У маршрутизації від v2.0 властивості імені більше не існує. визначити маршрут без властивості імені . тому слід використовувати шлях замість імені . this.router.navigate(['/path'])і жодної провідної косої риски для шляху не використовуйте, path: 'about'а неpath: '/about'

визначення маршрутизатора:

{path:'about', component: AboutComponent}

потім можна переходити 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');

Особисто я виявив, що, оскільки ми підтримуємо ngRoutesколекцію (довга історія), я отримую найбільше задоволення від:

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

Я фактично використовую його як частину одного з наших запитань щодо інтерв'ю. Таким чином, я можу отримати майже миттєвий зчитування того, хто розвивається назавжди, спостерігаючи, хто смикається, коли вони стикаються GOTO(1)з перенаправленням на домашню сторінку.