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

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

내 응용 프로그램에는 구성 요소가 있고 모든 데이터는 구성 요소의 생성자에서 호출하는 API에서 가져옵니다. 내 페이지 데이터를 업데이트하는 버튼이 있습니다. 버튼을 클릭하면 백엔드에 데이터를 저장하고 데이터를 새로 고칩니다. 따라서 내 요구 사항에 따라 구성 요소를 다시로드 / 새로 고침하는 것은 데이터를 새로 고치는 것뿐입니다. 이것이 또한 요구 사항이라면 구성 요소 생성자에 작성된 동일한 코드를 사용하십시오.

명시적인 경로가없는 또 다른 방법 :

async reload(url: string): Promise<boolean> {
  await this.router.navigateByUrl('.', { skipLocationChange: true });
  return this.router.navigateByUrl(url);
}

kdo

// reload page hack methode

push(uri: string) {
    this.location.replaceState(uri) // force replace and no show change
    await this.router.navigate([uri, { "refresh": (new Date).getTime() }]);
    this.location.replaceState(uri) // replace
  }

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

onReload(){
 this.router.navigate(['/servers'],{relativeTo:this.route})
}

html 파일

<a (click)= "getcoursedetails(obj.Id)" routerLinkActive="active" class="btn btn-danger">Read more...</a>

ts 파일

  getcoursedetails(id)
  { 
  this._route.navigateByUrl('/RefreshComponent', { skipLocationChange: true }).then(() => {
    this._route.navigate(["course",id]);
  }); 

이와 같이 각도 2의 페이지를 새로 고치는 다른 방법 은 f5처럼 보입니다.

import { Location } from '@angular/common';

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}