Angular 2-this.router.parent.navigate( '/ about')を使用して別のルートにナビゲートする方法


186

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

       });
   }
 }

また、ルート構成をapp.tsファイルに次のように設定しました:@RouteConfig([{path: '/'、redirectTo: '/ home'}、{path: '/ home'、component:Todo、as : 'Home'}、{path: '/ about'、component:About、as: 'About'}])
AngularM

必要ではないため、/パスからを削除する必要があります
mast3rd3mon

回答:


318

絶対パスルーティング

ナビゲーションのための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の公式ドキュメントから


3
子ルートがある場合は注意してください。 { path: 'home', component: Home, children: homeRoutes }次に、それをルーターメソッドに提供します。this.router.navigate(['home/address-search'])またはthis.router.navigateByUrl(/'home/address-search')
Daniel Ram

これは良い答えですが、this.router= Router;一部の読者を混乱させる可能性があることに注意することが重要 です。この場合、代わりにこのコードを使用して作成したルーターの依存性注入についての言及です constructor( private router: Router )
siddharta

@siddhartaヒントをありがとう、私はあなたがそれを指摘するまで気づきませんでした。私はもともとそれをすぐに書いて、後でそれを更新するつもりでしたが、忘れていました。この例は、適切な依存関係注入を使用するように更新されました。
TetraDev

@TetraDevと "this.route"がどこから来たか:D、それをur依存関係に追加
Noob

33

あなたは使うべきです

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

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

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

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

1
こんにちは、それを行うと、typescriptコンパイラで次のエラーメッセージが表示されます。「タイプ 'string'の引数はタイプany []のパラメーターに割り当てることができません。プロパティプッシュがタイプタイプで欠落しています」
AngularM

私はこれを試しましたが、うまくいきませんでした:this.router.parent.navigate( '[/ About]');
AngularM 2015年

4
次の構文を使用する必要があります:this.router.parent.navigate(['/ About']); 文字列 '[/ About]'ではなく配列['/ About']を渡す必要があります
Luca

ルーター3ベータ版の使用this._router.navigate(['/some-route']);
Adrian Moisa

27

なしでも使用できます 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プロパティは存在しません。名前プロパティなしのルート定義。したがって、名前の代わりにパスを使用する必要があります。そしてノー先頭のスラッシュの使用ので、パスの代わりにthis.router.navigate(['/path'])path: 'about'path: '/about'

次のようなルーター定義:

{path:'about', component: AboutComponent}

次に移動できます path

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

6
nameAngular 2.0のRouteタイプでは非推奨です。
RynoRn

角度2での代わりに使用されるようにはなら。詳細については、-> angular.io/docs/ts/latest/guide/router.htmlv2.3.0dataname
WildDev

8
import { Router } from '@angular/router';
//in your constructor
constructor(public router: Router){}

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

3
このコードスニペットが解決策となる可能性がありますが、説明を含めると、投稿の品質を向上させるのに役立ちます。あなたは将来の読者のための質問に答えていることを覚えておいてください、そしてそれらの人々はあなたのコード提案の理由を知らないかもしれません。
Adam Kipnis

2

個人的に、私はngRoutesコレクション(ロングストーリー)を維持しているので、私は以下から最も楽しみを見つけます。

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

私は実際にそれをインタビューの質問の一部として使用しています。このようにしてGOTO(1)、ホームページのリダイレクトに遭遇したときに誰がけいれんするかを観察することで、誰が永遠に発展しているかをほぼ瞬時に読み取ることができます。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.