Angular에서 현재 페이지를 새로 고치는 방법은 무엇입니까? 방법 소개

이 글에서는 현재 페이지를 새로 고치는 여러 가지 Angular 방법을 공유하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Angular가 현재 페이지를 새로 고치는 여러 가지 방법

---

기본적으로 Angular 라우터는 현재 URL로 이동하라는 요청을 받으면 무시합니다.

<a routerLink="/heroes" routerLinkActive="active">Heroes</a>

같은 링크를 반복해서 클릭하면 페이지가 새로고침되지 않습니다.

onSameUrlNavigation 속성은 경로 재로드를 지원하기 위해 Angular 5.1에서 제공됩니다.

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

onSameUrlNavigation에는 'reload'와 'ignore'라는 두 가지 선택 값이 있으며 기본값은 'ignore'입니다. 그러나 onSameUrlNavigation을 'reload'로 변경하면 RouterEvent 이벤트만 트리거되며 페이지는 다시 로드되지 않습니다. 계속하기 전에 라우터 추적을 활성화하고 브라우저 콘솔에서 라우팅 이벤트 로그를 확인합니다.

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload', enableTracing: true})],
  exports: [RouterModule]
})

onSameUrlNavigation이 구성되지 않은 경우 동일한 링크를 다시 클릭하면 onSameUrlNavigation을 '다시 로드'로 구성한 후 로그가 출력되지 않는 것을 볼 수 있습니다. NavigationStart, RoutesRecognized, GuardsCheckStart, GuardsCheckEnd, ActivationEnd, NavigationEnd 등의 이벤트가 포함된 로그를 출력합니다.

추천 관련 튜토리얼: "angular tutorial"

다음은 현재 페이지를 새로 고치는 여러 가지 방법을 소개합니다:

NavigationEnd

1 onSameUrlNavigation을 'reload'로 구성

2. event

라우터 이벤트를 구독하고 NavigationEnd에서 데이터를 다시 로드하고 구성 요소가 삭제되면 구독을 취소하세요.

export class HeroesComponent implements OnDestroy {
  heroes: Hero[];
  navigationSubscription;

  constructor(private heroService: HeroService, private router: Router) {
    this.navigationSubscription = this.router.events.subscribe((event: any) => {
      if (event instanceof NavigationEnd) {
        this.init();
      }
    });
  }

  init() {
    this.getHeroes();
  }

  ngOnDestroy() {
    if (this.navigationSubscription) {
      this.navigationSubscription.unsubscribe();
    }
  }
  ...
}

이 방법을 사용하면 필요에 따라 페이지를 새로 고치도록 구성할 수 있지만 코드가 번거롭습니다.

RouteReuseStrategy

1. onSameUrlNavigation을 'reload'로 구성

2. Route를 재사용하지 않고 RouteReuseStrategy를 사용자 정의합니다. 구현하는 방법에는 두 가지가 있습니다.

코드에서 전략 변경:

constructor(private heroService: HeroService, private router: Router) {
  this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
  };
}

Angular 애플리케이션 라우터 Singleton 개체이므로 이 방법을 사용하면 한 구성 요소의 정책을 변경하면 다른 구성 요소에 영향을 주지만 브라우저에서 페이지를 새로 고친 후 라우터가 다시 초기화되므로 혼동이 쉽게 발생할 수 있으므로 권장되지 않습니다.

사용자 정의 RouteReuseStrategy:

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

export class CustomReuseStrategy implements RouteReuseStrategy {

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

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

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

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

  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return false;
  }

}

사용자 정의 RouteReuseStrategy 사용:

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule],
  providers: [
    {provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
  ]
})

이 방법은 더 복잡한 경로 재사용 전략을 구현할 수 있습니다.

ResolveResolve를 사용하여 서버에서 미리 데이터를 가져오면 경로가 활성화되기 전에 데이터가 준비됩니다.

1. ResolverService 구현

구성 요소의 초기화 코드를 Resolve로 전송:

import {Injectable} from '@angular/core';
import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

import {HeroService} from '../hero.service';
import {Hero} from '../hero';

@Injectable({
  providedIn: 'root',
})
export class HeroesResolverService implements Resolve<Hero[]> {
  constructor(private heroService: HeroService) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Hero[]> | Observable<never> {
    return this.heroService.getHeroes();
  }
}

라우팅을 위한 해석기 구성:

path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}

2. 대신 구성 요소 코드를 수정하고 Read에서 데이터를 가져옵니다.

constructor(private heroService: HeroService, private route: ActivatedRoute) {
}

ngOnInit() {  this.route.data.subscribe((data: { heroes: Hero[] }) => {    this.heroes = data.heroes;
  });
}

3. 'reload'

4, runGuardsAndResolvers를 'always'

runGuardsAndResolvers 선택적 값으로 구성: 'paramsChange', 'paramsOrQueryParamsChange', 'always'

{path: 'heroes', component: HeroesComponent, canActivate: [CanActivateAuthGuard], resolve: {heroes: HeroesResolverService}, runGuardsAndResolvers: 'always'}

timestampgive 라우터가 시간 매개변수를 추가합니다. 어어어어어

그런 다음 구성 요소에서 queryParamMap을 구독하세요.

<a (click)="gotoHeroes()">Heroes</a>

더 많은 프로그래밍 관련 지식을 보려면

프로그래밍 비디오

를 방문하세요! !

위 내용은 Angular에서 현재 페이지를 새로 고치는 방법은 무엇입니까? 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!