【Angular2-Routing】ナビゲーションをコントロール: routerLink 属性を自在に操る

Angular と Angular2-Routing で routerLink 属性を条件付きで無効にする方法

ngIf ディレクティブは、特定の条件が満たされた場合にのみ要素を表示するのに役立ちます。routerLink 属性を条件付きで無効にするには、次のように ngIf ディレクティブを使用できます。

<a [routerLink]="['/my-route']" *ngIf="condition">My Route</a>

この例では、condition 変数が true の場合のみ、routerLink 属性が有効になります。

Ternary operator は、条件に基づいて異なる値を返すのに役立ちます。routerLink 属性を条件付きで無効にするには、次のように ternary operator を使用できます。

<a [routerLink]="condition ? ['/my-route'] : null">My Route</a>

この例では、condition 変数が true の場合、routerLink 属性に /my-route が設定されます。そうでない場合は、null が設定されます。null が設定されると、routerLink 属性が無効になります。

自定义ディレクティブを使用する

より複雑なロジックが必要な場合は、カスタムディレクティブを作成できます。カスタムディレクティブは、独自のロジックを実装して、routerLink 属性を条件付きで有効または無効にすることができます。

カスタムディレクティブを作成するには、次のようにします。

1. ディレクティブクラスを作成します。
2. ディレクティブのホストバインディングを定義します。

以下は、routerLink 属性を条件付きで無効にするカスタムディレクティブの例です。

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({
  selector: '[disableRouterLink]'
})
export class DisableRouterLinkDirective {
  @Input() disableRouterLink: boolean;

  @HostBinding('attr.routerLink')
  get routerLink() {
    return this.disableRouterLink ? null : this.routerLinkValue;
  }

  @Input() routerLinkValue: string[];
}

<a [routerLink]="['/my-route']" disableRouterLink="condition">My Route</a>

これらの方法はすべて、Angular と Angular2-Routing で routerLink 属性を条件付きで無効にするために使用できます。どの方法が最適かは、特定のニーズによって異なります。

Angular と Angular2-Routing で routerLink 属性を無効にするサンプルコード

ngIf ディレクティブを使用する

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about" *ngIf="loggedIn">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedIn = false;
}

この例では、loggedIn 変数が false の場合、About リンクは非表示になります。

ternary operator を使用する

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about" [routerLink]="loggedIn ? '/about' : null">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedIn = false;
}

カスタムディレクティブを使用する

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about" disableRouterLink [disableRouterLink]="!loggedIn">About</a>
  <a routerLink="/contact">Contact</a>
</nav>

import { Directive, Input, HostBinding } from '@angular/core';

@Directive({
  selector: '[disableRouterLink]'
})
export class DisableRouterLinkDirective {
  @Input() disableRouterLink: boolean;

  @HostBinding('attr.routerLink')
  get routerLink() {
    return this.disableRouterLink ? null : this.routerLinkValue;
  }

  @Input() routerLinkValue: string[];
}

Angular と Angular2-Routing で routerLink 属性を条件付きで無効にするその他の方法

routerLink 属性にバインドされた値を条件付きで変更することで、routerLink 属性を有効または無効にすることができます。

<a [routerLink]="condition ? ['/my-route'] : null">My Route</a>

<a #myLink>My Route</a>

ngOnInit() {
  if (this.condition) {
    this.myLink.setAttribute('routerLink', '/my-route');
  } else {
    this.myLink.removeAttribute('routerLink');
  }
}

この例では、condition 変数が true の場合、myLink 要素に routerLink 属性が追加されます。そうでない場合は、routerLink 属性が削除されます。

routerLink 属性を制御するカスタムサービスを作成する

1. サービスクラスを作成します。
2. サービスに routerLink 属性を制御するメソッドを追加します。
3. コンポーネントでサービスを注入します。
4. サービスのメソッドを呼び出して、routerLink 属性を制御します。

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

@Injectable({
  providedIn: 'root'
})
export class RouterLinkService {
  constructor(private router: Router) {}

  disableRouterLink(element: HTMLElement) {
    element.removeAttribute('routerLink');
  }

  enableRouterLink(element: HTMLElement, route: string) {
    element.setAttribute('routerLink', route);
  }
}

このサービスを使用するには、次のようにコンポーネントで注入します。

import { Component, OnInit, Inject } from '@angular/core';
import { RouterLinkService } from './router-link.service';

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

  ngOnInit() {
    const myLink = document.getElementById('myLink');

    if (this.condition) {
      this.routerLinkService.enableRouterLink(myLink, '/my-route');
    } else {
      this.routerLinkService.disableRouterLink(myLink);
    }
  }
}