해시 위치 전략과 함께 각도 2를 사용하고 있습니다.

구성 요소는 해당 경로로로드됩니다.

"departments/:id/employees"

지금까지는 괜찮습니다.

여러 개의 편집 된 테이블 행을 성공적으로 일괄 저장 한 후 다음을 통해 현재 경로 URL을 다시로드하려고합니다.

this.router.navigate([`departments/${this.id}/employees`]);

그러나 아무 일도 일어나지 않는 이유는 무엇입니까?

navigate ()가 브라우저의 주소 표시 줄에 이미 표시된 URL을 변경하지 않으면 라우터는 아무 작업도 수행하지 않습니다. 데이터를 새로 고치는 것은 라우터의 일이 아닙니다. 데이터를 새로 고치려면 구성 요소에 삽입 된 서비스를 작성하고 서비스에서로드 기능을 호출하십시오. 새 데이터가 검색되면 바인딩을 통해보기가 업데이트됩니다.

이제 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');

이 기능은 더미 경로로 리디렉션되고 사용자가 모르게 목적지 경로로 빠르게 돌아갑니다.

편집하다

최신 버전의 Angular (5.1+)의 경우 @Simon McClive가 제안한 답변을 사용하십시오.

이전 답변

Angular에 대한 GitHub 기능 요청에서이 해결 방법을 찾았습니다.

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

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

이것을 app.component.ts ngOnInit 함수에 추가하려고 시도했지만 제대로 작동했습니다. 동일한 링크를 추가로 클릭하면 component및 데이터 가 다시로드 됩니다.

원래 GitHub 기능 요청에 연결

크레딧은 GitHub 에서 mihaicux2 로갑니다 .

나는 이것을 버전 4.0.0-rc.3으로 테스트 했다.import { Router, NavigationEnd } from '@angular/router';

조금 까다로운 : 일부 더미 매개 변수와 동일한 경로를 사용하십시오. 예를 들어

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

Angular 9 프로젝트에 이것을 사용하고 있습니다 :

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

PS : "Angular 7, 8"에서도 테스트 및 작동

각도 2-4 경로 재로드 핵

나 에게이 방법을 루트 구성 요소 (라우트에있는 구성 요소) 내부에서 사용하면 작동합니다.

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]);
    });
  }

이것은 매력처럼 나를 위해 작동합니다

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

매개 변수 변경시 다시로드 페이지가 발생하지 않습니다. 이것은 정말 좋은 기능입니다. 페이지를 다시로드 할 필요는 없지만 구성 요소의 값을 변경해야합니다. paramChange 메소드는 URL 변경을 호출합니다. 컴포넌트 데이터를 업데이트 할 수 있습니다

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}

이것이 내가 Angular 9로 한 일 입니다. 이전 버전에서 작동하는지 잘 모르겠습니다.

다시로드해야 할 때 이것을 호출해야합니다.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

라우터 forRoot는 SameUrlNavigation을 'reload'로 설정해야합니다.

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

그리고 모든 경로는 runGuardsAndResolvers를 'always'로 설정해야합니다.

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

나를 위해 하드 코딩 작업

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

내가 아는 한 Angular 2의 라우터로는이 작업을 수행 할 수 없지만 다음과 같이 할 수 있습니다.

window.location.href = window.location.href

뷰를 다시로드합니다.

앵귤러의 내부 작업을 고민 할 필요가없는 빠르고 간단한 솔루션을 찾았습니다.

기본적으로 : 동일한 대상 모듈로 대체 경로를 만들고 그 사이를 전환하면됩니다.

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

그리고 여기 토글 메뉴 :

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

그것이 도움이되기를 바랍니다 :)

약간 하드 코어이지만

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

나의 경우에는:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

올바른 일

route.navigate () 메소드에서 OnInit을 구현하고 ngOnInit ()를 호출하십시오.

예를 참조하십시오 :

export class Component implements OnInit {

  constructor() {   }

  refresh() {
    this.router.navigate(['same-route-here']);
    this.ngOnInit();   }

  ngOnInit () {

  }

대한 더미의 구성 요소 및 경로를 사용하여 유사한 시나리오를 해결 reload실제로 않습니다, redirect. 이것은 모든 사용자 시나리오를 다루지는 않지만 내 시나리오에서 효과적이었습니다.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'reload',
  template: `
    <h1>Reloading...</h1>
  `,
})
export class ReloadComponent implements OnInit{
  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
    this.router.navigateByUrl(url);
  }
}

와일드 카드를 사용하여 모든 URL을 잡기 위해 라우팅이 연결되었습니다.

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, ReloadComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { 
        path: 'reload',
        children: [{
          path: '**',
          component: ReloadComponent 
        }]
      },
      { path: '**', redirectTo: 'login'}
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

이것을 사용하려면 우리가 가고 싶은 URL에 reload를 추가하면됩니다.

  this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})

현재 경로를 새로 고치는 다른 방법이 있습니다

라우터 동작 변경 (Angular 5.1 이후) 라우터에서 onSameUrlNavigation을 'reload'로 설정하십시오. 이는 동일한 URL 탐색에서 라우터 이벤트를 생성합니다.

• 그런 다음 경로를 구독하여 처리 할 수 ​​있습니다
• runGuardsAndResolvers와 함께 사용하여 리졸버를 다시 실행할 수 있습니다.

라우터를 그대로 두십시오

• URL에서 현재 타임 스탬프와 함께 새로 고침 queryParam을 전달하고 라우팅 된 구성 요소에서 queryParams를 구독하십시오.
• 라우터 콘센트의 이벤트 활성화를 사용하여 라우팅 된 구성 요소를 보유하십시오.

https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e에 더 자세한 설명을 작성했습니다.

도움이 되었기를 바랍니다.

새로 고치려는 구성 요소의 경로가이라고 가정하고 view다음을 사용하십시오.

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

debugger메소드 내부 를 추가하여로 이동 한 후 정확한 경로가 무엇인지 알 수 있습니다 "departments/:id/employees".

해결책은 링크가 항상 다시로드되는 방식으로 더미 매개 변수 (예 : 초 단위)를 전달하는 것입니다.

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

나는 이 문제를 사용 setTimeout하고 navigationByUrl해결하기 위해 ... 그리고 그것은 나에게 잘 작동합니다.

다른 URL로 리디렉션되고 대신 현재 URL로 다시 온다 ...

 setTimeout(() => {
     this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
           this.router.navigate([route]));
     }, 500)

나는 이것이 Angular 6 이상에서 (기본적으로) 해결되었다고 생각합니다. 검사

• 여기 https://github.com/angular/angular/issues/13831 &&

• 그리고 여기 https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

그러나 이것은 전체 경로에 적용됩니다 (모든 어린이 경로도 포함)

단일 구성 요소를 타겟팅하려면 다음과 같이하십시오. 변경되는 쿼리 매개 변수를 사용하여 원하는만큼 탐색 할 수 있습니다.

내비게이션 포인트 (클래스)

   this.router.navigate(['/route'], {
        queryParams: { 'refresh': Date.now() }
    });

"새로 고침 / 다시로드"하려는 구성 요소에서

// . . . Component Class Body

  $_route$: Subscription;
  constructor (private _route: ActivatedRoute) {}

  ngOnInit() {
    this.$_route$ = this._route.queryParams.subscribe(params => {
      if (params['refresh']) {
         // Do Something
         // Could be calling this.ngOnInit() PS: I Strongly advise against this
      }

    });
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leak and unexpected behavior
    this.$_route$.unsubscribe();
  }

// . . . End of Component Class Body

Angular에 여전히 좋은 해결책이없는 것 같습니다. https://github.com/angular/angular/issues/31843 에서 github 문제를 제기했습니다.

그 동안 이것은 내 해결 방법입니다. 위에서 제안한 다른 솔루션 중 일부를 기반으로하지만 조금 더 강력하다고 생각합니다. ReloadRouter다시로드 기능 RELOAD_PLACEHOLDER을 처리하고 코어 라우터 구성에 추가하는 " "로 라우터 서비스를 래핑하는 것도 포함됩니다 . 이것은 중간 탐색에 사용되며 다른 경로 (또는 가드)의 트리거를 피합니다.

참고 : 만을 사용 ReloadRouter하면 때 이러한 경우에 원하는 다시로드 기능을. Router그렇지 않으면 정상을 사용하십시오 .

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReloadRouter {
  constructor(public readonly router: Router) {
    router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
  }

  public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
    return this.router
      .navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
      .then(() => this.router.navigate(commands, extras));
  }
}

가져 오기 Router및 ActivatedRoute에서@angular/router

import { ActivatedRoute, Router } from '@angular/router';

삽입 Router및 ActivatedRoute(URL에서 필요한 것이있는 경우)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

필요한 경우 URL에서 매개 변수를 가져 오십시오.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

더미 또는 기본 URL로 이동하여 실제 URL로 이동하여 트릭을 사용하면 구성 요소가 새로 고쳐집니다.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

당신의 경우

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

더미 경로를 사용하는 경우 URL과 일치하지 않는 경우 찾을 수없는 URL을 구현 한 경우 제목 깜박임 '찾을 수 없음'이 표시됩니다.

경로 매개 변수 변경에 가입

    // parent param listener ie: "/:id"
    this.route.params.subscribe(params => {
        // do something on parent param change
        let parent_id = params['id']; // set slug
    });

    // child param listener ie: "/:id/:id"
    this.route.firstChild.params.subscribe(params => {
        // do something on child param change
        let child_id = params['id'];
    });

라우터 링크 를 통해 경로를 변경하는 경우 다음을 수행 하십시오.

  constructor(public routerNavigate: Router){

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

          this.router.events.subscribe((evt) => {

            if (evt instanceof NavigationEnd) {

                this.router.navigated = false;
             }
          })
      }

RouterModule에서 "onSameUrlNavigation"속성을 사용한 다음 라우트 이벤트 https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e 를 구독해야합니다.

경로를 저장해야 할 시점을 결정합니다.

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

라우터의 탐색 값을 false로 설정하면이 경로가 라우팅되지 않습니다.

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

나는 몇 가지 수정을 시도했지만 그중 아무것도 작동하지 않습니다. 내 버전은 간단합니다 : 쿼리 매개 변수에 새로운 미사용 매개 변수 추가

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// 백틱을 사용하여 경로를 묶습니다.

window.location.replace ( departments/${this.id}/employees)