[angular] Angular에서 구성 요소를 새로 고치는 방법

Program / 글쓴이

Angular 프로젝트에서 일하고 있습니다. 구성 요소에서 새로 고침 작업에 어려움을 겪고 있습니다.

버튼 클릭시 라우터의 구성 요소를 새로 고침하고 싶습니다. 나는 그것을 클릭하면 새로 고침 버튼이 있습니다. 구성 요소 / 라우터를 새로 고쳐야합니다.

나는 시도 window.location.reload()하고 location.reload()이 두 내 필요에 적합하지 않습니다. 아는 사람이 있으면 도와주세요.

답변

아래와 같이 내 코드를 조사하고 수정 한 후 스크립트가 저에게 효과적이었습니다. 방금 조건을 추가했습니다.

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

답변

this.ngOnInit (); 사용하십시오 . 전체 페이지를 다시로드하는 대신 동일한 구성 요소를 다시로드합니다 !!

DeleteEmployee(id:number)
  {
    this.employeeService.deleteEmployee(id)
    .subscribe(
      (data) =>{
        console.log(data);

        this.ngOnInit();

      }),
      err => {
        console.log("Error");
      }
  }

답변

이것을 필요한 구성 요소의 생성자에 코드에 추가하면 저에게 효과적이었습니다. 

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

this.mySubscription = this.router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    // Trick the Router into believing it's last link wasn't previously loaded
    this.router.navigated = false;
  }
});

있는지에 대한 확인 unsubscribe이에서 mySubscription 에서 ngOnDestroy().

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

자세한 내용은이 스레드를 참조하십시오-https: //github.com/angular/angular/issues/13831

답변

다행히 Angular 5.1 이상을 사용하는 경우 기본 지원이 추가되었으므로 더 이상 해킹을 구현할 필요가 없습니다. RouterModule 옵션에서 onSameUrlNavigation을 ‘reload’ 로 설정하기 만하면됩니다 .

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

자세한 내용은 여기에서 찾을 수 있습니다. https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

답변

이것은 상자에서 약간 벗어난 것이며 이것이 도움이되는지 여부는 모르겠지만 시도해 보았습니다.

this.ngOnInit();

그것의 기능 그래서 당신이 그것에있는 모든 코드는 새로 고침처럼 호출됩니다.

답변

그냥 이렇게 : (각도 9의 경우)

import { Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document){ }

someMethode(){ this.document.location.reload(); }

답변

이는 해킹을 통해 달성 할 수 있으며 일부 샘플 구성 요소로 이동 한 다음 다시로드 할 구성 요소로 이동합니다. 

this.router.navigateByUrl('/SampleComponent', { skipLocationChange: true });
this.router.navigate(["yourLandingComponent"]);