[解決済み] [Solved] 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');

       });
   }
 }

解決方法は？

アブソリュートパスのルーティング

ナビゲーションには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 }]

ディレクトリライクな構文

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

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

../ を指定すると、ルートパスが1レベル上がります。

相対ナビゲーションの構文と祖先のパスを組み合わせることができます。兄弟ルートにナビゲートする必要がある場合、先祖パスの代わりに ../<sibling> という規約で、1つ上の階層に移動し、兄弟ルートのパスを越えて下ることができます。

相対的な命名に関する重要な注意事項

相対パスで移動するには Router.navigate メソッドを使用するには ActivatedRoute を使用して、ルータに現在のルートツリーの位置を知らせます。

リンクパラメータの配列の後に、オブジェクトを追加します。 relativeTo プロパティに設定された ActivatedRoute . その後、ルーターはアクティブなルートの位置情報に基づいてターゲットURLを計算します。

公式より Angular Router ドキュメント