[angular] 각도 2 라우터로 현재 경로를 다시로드하는 방법

이제 onSameUrlNavigation라우터 구성 의 속성을 사용하여 Angular 5.1에서 수행 할 수 있습니다 .

여기에 방법을 설명하는 블로그를 추가했지만 그 요지는 다음과 같습니다.

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

라우터 구성 활성화 onSameUrlNavigation옵션에서로 설정하십시오 'reload'. 이로 인해 이미 활성화 된 경로를 탐색하려고 할 때 라우터가 이벤트주기를 발생시킵니다.

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

경로 정의에서로 설정 runGuardsAndResolvers하십시오 always. 이것은 라우터에게 항상 가드와 리졸버 사이클을 시작하여 관련 이벤트를 발생 시키도록 지시합니다.

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

마지막으로 다시로드를 활성화하려는 각 구성 요소에서 이벤트를 처리해야합니다. 라우터를 가져 와서 이벤트에 바인딩하고 구성 요소의 상태를 재설정하고 필요한 경우 데이터를 다시 가져 오는 초기화 방법을 호출하여이를 수행 할 수 있습니다.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 initialiseInvites() {
   // Set default values and re-fetch any data you need.
 }

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

이러한 모든 단계가 완료되면 경로 다시로드가 활성화되어 있어야합니다.

답변

redirectTo(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

this.redirectTo('//place your uri here');

this._router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
};

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }