Угловой 2 - Как перейти на другой маршрут, используя это.обращать в бегство.родитель.навигация ('/about')?

угловой 2 - как перейти на другой маршрут с помощью этого.обращать в бегство.родитель.навигация ('/about').



это, кажется, не работает.
Я попробовал местоположение.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');



       });

   }

 }


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

542   5  

5 ответов:

абсолютный путь маршрутизации

есть 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> соглашение, чтобы подняться на один уровень, а затем снова и вниз по пути маршрута брата.

важные замечания относительно навигационной панели

для навигации a относительный путь с Router.navigate метод, вы должны поставить ActivatedRoute чтобы дать маршрутизатору информацию о том, где вы находитесь в текущем дереве маршрутов.

после массива параметров ссылки добавьте объект с relativeTo равную ActivatedRoute. Затем маршрутизатор вычисляет целевой URL-адрес на основе местоположения активного маршрута.

официальных Угловой Маршрутизатор Документация

150  
2018-07-31 22:59:20

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

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

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

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

this.router.parent.navigate(['About']);
29  
2016-04-26 10:36:15

и 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
}
18  
2016-12-12 16:13:00 
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

//navigation 
link.this.router.navigateByUrl('/home');
4  
2018-04-19 21:16:27

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

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

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

0  
2018-04-14 23:59:47

Comments

    Ничего не найдено.
Click here to cancel reply.