>  기사  >  웹 프론트엔드  >  Angular 2에서 RouteReuseStrategy의 shouldDetach 메소드를 사용하여 특정 경로가 저장되는 것을 방지하는 방법은 무엇입니까?

Angular 2에서 RouteReuseStrategy의 shouldDetach 메소드를 사용하여 특정 경로가 저장되는 것을 방지하는 방법은 무엇입니까?

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-10-25 06:40:02550검색

How to prevent specific routes from being stored using RouteReuseStrategy's shouldDetach method in Angular 2?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.