이 글에서는 현재 페이지를 새로 고치는 여러 가지 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; }; }
사용자 정의 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; }); }
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!