Angularでアクティブなルートをチェックする方法

ActivatedRouteを使用する方法: AngularのRouterModuleは、アクティブなルートに関する情報を提供するActivatedRouteを提供しています。以下は、ActivatedRouteを使用してアクティブなルートをチェックする方法の例です。

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="isActiveRoute('example')">This is the active route!</div>
  `,
})
export class ExampleComponent {
  constructor(private route: ActivatedRoute) {}
  isActiveRoute(routeName: string): boolean {
    return this.route.snapshot.routeConfig?.path === routeName;
  }
}

上記の例では、isActiveRouteメソッドを使用して、現在のルートが指定したルート名と一致するかどうかを確認しています。

Routerを使用する方法: Routerオブジェクトを使用して、アクティブなルートに関する情報を取得することもできます。以下は、Routerを使用してアクティブなルートをチェックする方法の例です。

import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-example',
  template: `
    <div *ngIf="isActiveRoute('example')">This is the active route!</div>
  `,
})
export class ExampleComponent {
  constructor(private router: Router) {}
  isActiveRoute(routeName: string): boolean {
    return this.router.url.includes(routeName);
  }
}

上記の例では、isActiveRouteメソッドを使用して、現在のURLが指定したルート名を含んでいるかどうかを確認しています。

これらは、Angularでアクティブなルートをチェックするためのシンプルで簡単な方法の一部です。必要に応じて、これらの例をカスタマイズして使用することができます。