Angular 2 - Как перейти к другому маршруту, используя this.router.parent.navigate ('/about')?

Angular 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('[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');

       });
   }
 }

Заранее спасибо!

112 голосов | спросил AngularM 6 52015vEurope/Moscow11bEurope/MoscowFri, 06 Nov 2015 19:45:20 +0300 2015, 19:45:20

5 ответов


0

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

Есть 2 метода навигации: .navigate() и .navigateByUrl()

Вы можете использовать метод .navigateByUrl() для маршрутизации по абсолютному пути:

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

this.router= Router;
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-адрес на основе местоположения активного маршрута.

Из официальной документации по угловым маршрутизаторам

ответил TetraDev 3 J0000006Europe/Moscow 2016, 22:38:19
0

Вы должны использовать

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

Помимо указания пути к маршруту, вы также можете указать название вашего маршрута:

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

this.router.parent.navigate(['About']);
ответил Luca 6 52015vEurope/Moscow11bEurope/MoscowFri, 06 Nov 2015 20:07:52 +0300 2015, 20:07:52
0

Также можно использовать без parent

произнесите определение маршрутизатора как:

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

затем можно перемещаться по name вместо path

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

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

В Routing from v2.0 свойство name больше не существует. Маршрут определите без свойства name . поэтому вы должны использовать путь вместо name . this.router.navigate(['/path']) и без начального слеша для пути, поэтому используйте path: 'about' вместо path: '/about'

определение маршрутизатора, например:

{path:'about', component: AboutComponent}

затем можно перемещаться по path

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}
ответил Shaishab Roy 24 MarpmThu, 24 Mar 2016 14:15:10 +03002016-03-24T14:15:10+03:0002 2016, 14:15:10
0
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
ответил suresh 19 PMpThu, 19 Apr 2018 21:16:27 +030016Thursday 2018, 21:16:27
0

Лично я обнаружил, что, поскольку мы поддерживаем коллекцию ngRoutes (длинная история), я получаю наибольшее удовольствие от:

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

Я фактически использую это как часть одного из наших вопросов интервью. Таким образом, я почти сразу узнаю, кто разрабатывался вечно, наблюдая за тем, кто дергается, когда они сталкиваются с GOTO(1) для перенаправления домашней страницы.

ответил ZenAtWork 14 PMpSat, 14 Apr 2018 23:59:47 +030059Saturday 2018, 23:59:47

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132