如何防止在 Angular 2 中使用 RouteReuseStrategy 的 shouldDetach 方法儲存特定路由？

如何在 Angular 2 中針對特定路由實現 RouteReuseStrategy 的 shouldDetach

路由是任何單頁應用程式的重要組成部分，Angular 2 的路由功能相當強大。 Angular 2 路由器最有用的功能之一是能夠儲存路由狀態，以便日後重複使用。這是透過實作 RouteReuseStrategy 介面來完成的。

RouteReuseStrategy 介面有許多方法可以實現來自訂路由的儲存和重複使用方式。最重要的方法之一是 shouldDetach，它用於確定當使用者離開某個路由時是否應該儲存該路由。

預設情況下，Angular 2 將儲存所有路由的狀態導航至。但是，有時您可能希望阻止儲存某些路由。例如，您可能不想儲存顯示模式對話方塊或載入畫面的路由的狀態。

要防止儲存路由，您可以實作 shouldDetach 方法並傳回 false。這將告訴 Angular 2 當使用者離開路由時不要儲存路由的狀態。

這裡是如何實現shouldDetach 方法的範例：

<code class="typescript">import { Injectable } from '@angular/core';
import { RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';

@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    // Return `false` to prevent this route from being stored.
    return false;
  }

  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {}

  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return false;
  }

  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
    return null;
  }

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }
}</code>

使用這個自訂路由重用策略，您可以在NgModule 中提供它，如下所示：

<code class="typescript">import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: '', component: AppComponent }
    ], { useHash: true })
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}</code>

現在，只要使用者導航離開路線，就會呼叫自訂路由重用策略的shouldDetach 方法。您可以使用此方法來確定是否應該儲存路線。

以上是如何防止在 Angular 2 中使用 RouteReuseStrategy 的 shouldDetach 方法儲存特定路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！