ルーティングとページ遷移（navigateByUrl、location）

Angular2のルーティング設定例とページ遷移（navigateByUrl、location）する方法です。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  styles:[``],
  template: `
    <nav>
      <ul >
        <li><a routerLink="./" routerLinkActive="active">HOME</a></li>
        <li><a routerLink="./page1" routerLinkActive="active">ページ１</a></li>
        <li><a routerLink="./page2/:id" routerLinkActive="active">ページ２</a></li>
      </ul>
    </nav>
    <div>
      <router-outlet></router-outlet>
    </div>
  `,
})
export class AppComponent{ 
}

「routerLink」にパスを設定。

「routerLinkActive」はURLが合致したら、a要素のclassに「active」が追加されます。

「router-outlet」の次の要素（配下ではなく）に、遷移先ページのHTMLが出力されます。

「./page2/:id」のような「:id」とすることで、遷移先画面でパラメータを取得できます。

パラメータの取得方法は以下のような感じ。

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

@Component({})
export class Page1Component implements OnInit {
  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      // params['id']で取得可能
    });
  }
}

ボタンを押して何か処理を行ってからページ遷移したい場合は、navigateByUrl()やnavigate()を利用します。

以下はnavigateByUrl()でページ遷移する場合。

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

@Component({})
export class Page1Component {
  constructor(
    private router: Router
  ) { }

  pageChange(): void{
    this.router.navigateByUrl('/page2/123');
  }
}

新規登録と編集画面でURLを切り替えている場合、「戻る」で新規登録画面へ戻ってほしくないといった時は以下のようにします。

this.router.navigateByUrl('/page2/123', { replaceUrl: true });

location.back()を使います。

import { Location } from '@angular/common';
import { Component } from '@angular/core';

@Component({})
export class Page1Component {
  constructor(
    private location: Location
  ) { }

  pageBack(): void{
    this.location.back();
  }
}

• Router - ts - API
• RouterLinkActive - ts - API
• NavigationExtras - ts - API