Angular 2で特定のルートに対してRouteReuseStrategy shouldDetachを実装する方法

このチュートリアルでは、特定のルートに対してshouldDetachを実装する方法について説明します。

手順

1. RouteReuseStrategyインターフェースを実装するクラスを作成します。
2. shouldDetachメソッドをオーバーライドし、特定のルートに対してtrueを返します。

export class MyRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 特定のルートに対してtrueを返す
    if (route.routeConfig.path === 'my-route') {
      return true;
    }
    return false;
  }

  // 省略
}

1. AppModuleクラスでMyRouteReuseStrategyクラスをprovideします。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'my-route', component: MyComponent },
      { path: '**', component: NotFoundComponent }
    ])
  ],
  providers: [MyRouteReuseStrategy],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. アプリケーションを起動します。

説明

上記のコードでは、MyRouteReuseStrategyクラスがRouteReuseStrategyインターフェースを実装しています。shouldDetachメソッドは、route.routeConfig.pathが'my-route'の場合にtrueを返します。

これは、my-routeルートにナビゲートすると、コンポーネントが破棄されず、再利用されることを意味します。

shouldDetachメソッドは、コンポーネントの状態を保存する必要がある場合に便利です。

例えば、フォームコンポーネントがある場合、shouldDetachメソッドを使用して、ユーザーが入力したデータを保存することができます。

// MyComponent.ts

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

// my-component.component.html

<h1>My Component</h1>

<p>This is my component.</p>

// AppModule.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { MyComponent } from './my-component/my-component.component';
import { MyRouteReuseStrategy } from './my-route-reuse-strategy';

@NgModule({
  declarations: [
    AppComponent,
    MyComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'my-route', component: MyComponent },
      { path: '**', component: NotFoundComponent }
    ])
  ],
  providers: [MyRouteReuseStrategy],
  bootstrap: [AppComponent]
})
export class AppModule { }

// MyRouteReuseStrategy.ts

import { RouteReuseStrategy, ActivatedRouteSnapshot } from '@angular/router';

export class MyRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // 特定のルートに対してtrueを返す
    if (route.routeConfig.path === 'my-route') {
      return true;
    }
    return false;
  }

  // 省略
}

MyRouteReuseStrategyクラスはshouldDetachメソッドをオーバーライドし、route.routeConfig.pathが'my-route'の場合にtrueを返します。

実行方法

このコードを実行するには、次の手順に従います。

1. コードをファイルに保存します。
2. 次のコマンドを使用して、Angular CLIを使用してアプリケーションを作成します。

ng new my-app

1. 作成したアプリケーションのディレクトリに移動します。

cd my-app

1. 次のコマンドを使用して、アプリケーションを起動します。

ng serve

1. ブラウザで http://localhost:4200 にアクセスします。

確認方法

ブラウザで http://localhost:4200/my-route にアクセスすると、MyComponentコンポーネントが表示されます。

特定のルートに対してshouldDetachを実装する他の方法

ルートデータを使用する

ルートデータを使用して、特定のルートに対してshouldDetachを実装することができます。

export class MyRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // ルートデータから`shouldDetach`プロパティを取得する
    const shouldDetach = route.data['shouldDetach'];
    return shouldDetach === true;
  }

  // 省略
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'my-route', component: MyComponent, data: { shouldDetach: true } },
      { path: '**', component: NotFoundComponent }
    ])
  ],
  providers: [MyRouteReuseStrategy],
  bootstrap: [AppComponent]
})
export class AppModule { }

カスタムガードを使用する

export class MyCanDeactivateGuard implements CanDeactivate<MyComponent> {

  canDeactivate(component: MyComponent): boolean {
    // コンポーネントの状態を確認して、trueまたはfalseを返す
    return component.canDeactivate();
  }

}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: 'my-route', component: MyComponent, canDeactivate: [MyCanDeactivateGuard] },
      { path: '**', component: NotFoundComponent }
    ])
  ],
  providers: [MyCanDeactivateGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

これらの方法は、特定のルートに対してshouldDetachを実装する別の方法を提供します。