Angular 2 ルート遷移解説

Angular 2 でのルート遷移について

Angular 2 において、ルート間のナビゲーションは Router サービスを使用して行われます。Router サービスは、アプリケーションのルート構成を管理し、ルート間の遷移を処理します。

this.router.parent.navigate('/about') の意味を分解しましょう：

• .navigate('/about'): 指定されたルート (/about) にナビゲートします。
• .parent: 現在のコンポーネントの親ルートの Router インスタンスを取得します。
• this.router: 現在のコンポーネントの Router インスタンスへの参照です。

つまり、このコードは、現在のコンポーネントの親ルートから /about ルートに遷移します。

例

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.ht   ml',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor(private    router: Router) { }

  ngOnInit() {
  }

  navigateToAbout() {
    this.router.parent.navigate(['/about']);
  }
}

この例では、ParentComponent は、navigateToAbout メソッドを呼び出すことで、親ルートから /about ルートに遷移します。

注意

• 現在のコンポーネントがルートレベルのコンポーネントである場合は、単純に this.router.navigate('/about') を使用してルートに遷移できます。
• 親ルートにアクセスするために this.router.parent を使用する必要があるのは、現在のコンポーネントが子ルートである場合です。

親ルートから子ルートへの遷移

// parent.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.ht   ml',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  constructor(private    router: Router) { }

  ngOnInit() {
  }

  navigateToChild() {
    this.router.navigate(['/child']); // 子ルートに遷移
  }
}

// child.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-child',
  templateUrl: './chi   ld.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  constructor   (private router: Router) { }

  ngOnInit() {
  }

  navigateToParent() {
    this.router.parent.navigate(['/parent']); // 親ルートに遷移
  }
}

ルートレベルのコンポーネントからの遷移

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.componen   t.css']
})
export class AppComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

     navigateToAbout() {
    this.router.navigate(['/about']); // ルートレベルのコンポーネントから直接遷移
  }
}

RouterLink ディレクティブ

• テンプレート内でリンクを定義し、クリックすると指定されたルートにナビゲートします。

<a [routerLink]="['/about']">About</a>

• アクティブなルートをスタイルで強調表示します。

<a [routerLink]="['/about']" routerLinkActive="active">About</a>

RouterOutlet コンポーネント

• ルートのアウトレットを定義し、アクティブなルートのコンポーネントをレンダリングします。

<router-outlet></router-outlet>

Router.navigateByUrl()

• URL 文字列を使用して、ルートにナビゲートします。

this.router.navigateByUrl('/about');

プログラムによるルートの変更

• Router.navigate() を使用して、ルートの配列を使用してナビゲートします。

this.router.navigate(['/about', { id: 123 }]);

これらの代替方法を使用することで、Angular 2 アプリケーション内でルート間のナビゲーションを柔軟に実装することができます。

<a [routerLink]="['/about']">About</a>

<nav>
  <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
  <a [routerLink]="['/about']" routerLinkActive="active">About</a>
</nav>

<router-outlet></router-outlet>

this.router.navigateByUrl('/about?id=123');

this.router.navigate(['/about', { id: 123 }]);