web-dev-qa-db-ja.com

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');

       });
   }
 }

前もって感謝します！

javascriptangularangular2-routing
133
AngularM

絶対パスルーティング

ナビゲーションには.navigate()と.navigateByUrl()の2つの方法があります。

絶対パスルーティングにはメソッド.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 }]

ディレクトリ風の構文

ルータは、ルート名ルックアップをガイドするのを助けるためにリンクパラメータリストでディレクトリのような構文をサポートします。

現在のレベルに対して./または先頭のスラッシュがないことは相対的です。

../は、ルートパスの1つ上のレベルに上がるためのものです。

相対ナビゲーション構文を先祖パスと組み合わせることができます。兄弟ルートに移動する必要がある場合は、../<sibling>規則を使用して1つ上のレベルに移動し、次に兄弟ルートのパスを上下に移動することができます。

相対ナゲーションに関する重要な注意事項

Router.navigateメソッドで相対パスをナビゲートするには、現在のルートツリーのどこにいるのかをルーターに知らせるためにActivatedRouteを指定する必要があります。

Link parameters配列の後に、relativeToプロパティをActivatedRouteに設定したオブジェクトを追加します。その後、ルータはアクティブルートの位置に基づいてターゲットURLを計算します。

公式サイトから Angularルーターのドキュメント

205
TetraDev

あなたが使うべきです

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

ルートパスを指定するだけでなく、ルートの名前も指定できます。

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

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

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からのルーティングでは name propertyはもう存在しません。 name propertyなしのルート定義。そのため、 name の代わりに path を使用する必要があります。 this.router.navigate(['/path'])および 先行スラッシュなし pathのため、path: 'about'の代わりにpath: '/about'を使用

ルーターの定義は、

{path:'about', component: AboutComponent}

それからpathでナビゲートできます

goToAboutPage() {
    this.router.navigate(['/about']); // here "About" is path
}
20
Shaishab Roy
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

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

個人的に、私はngRoutesコレクション（長い話）を維持しているので、私は次のことから最も楽しいことを見つけました。

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

実際にインタビューの質問の一部として使用しています。このように、ホームページのリダイレクトのためにGOTO(1)にぶつかったときに誰がぴくぴく動くかを見ることで、誰が永遠に開発しているのかをすぐに読むことができます。

1
ZenAtWork