Jak odświeżyć komponent w Angular

Pracuję nad projektem Angular. Zmagam się z działaniem odświeżania w komponencie.

Chciałbym odświeżyć komponenty routera po kliknięciu przycisku. Mam przycisk odświeżania, kiedy klikam na niego, komponent / router wymaga odświeżenia.

Spróbowałem window.location.reload()i location.reload()te dwa nie są odpowiednie dla moich potrzeb. Proszę o pomoc, jeśli ktoś o tym wie.

Po kilku badaniach i zmodyfikowaniu mojego kodu, jak poniżej, skrypt zadziałał. Właśnie dodałem warunek:

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

Użyj this.ngOnInit (); aby przeładować ten sam komponent zamiast przeładowywać całą stronę !!

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

        this.ngOnInit();

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

Dodanie tego do kodu do konstruktora wymaganego komponentu działało dla mnie.

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

Upewnij się, że unsubscribez tego mySubscription w ngOnDestroy().

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

Więcej informacji można znaleźć w tym wątku - https://github.com/angular/angular/issues/13831

Na szczęście, jeśli używasz Angular 5.1+, nie musisz już implementować hacka, ponieważ dodano natywną obsługę. Musisz tylko ustawić onSameUrlNavigation na 'przeładowanie' w opcjach RouterModule:

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

Więcej informacji można znaleźć tutaj: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

to jest trochę po wyjęciu z pudełka i nie wiem, czy to ci pomoże, czy nie, ale próbowałem

this.ngOnInit();

jest to funkcja, więc każdy kod, który w niej masz, zostanie przywołany tak jak odświeżenie.

Jeszcze jeden sposób bez wyraźnej trasy:

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

Można to osiągnąć poprzez włamanie, przejdź do jakiegoś przykładowego komponentu, a następnie przejdź do komponentu, który chcesz ponownie załadować.

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

W mojej aplikacji mam komponent, a wszystkie dane pochodzą z API, które wywołuję w konstruktorze komponentu. Jest przycisk, za pomocą którego aktualizuję dane mojej strony. po kliknięciu przycisku zapisuję dane w zapleczu i odświeżam dane. Więc przeładowanie / odświeżenie komponentu - zgodnie z moim wymaganiem - jest tylko odświeżeniem danych. jeśli jest to również Twoje wymaganie, użyj tego samego kodu zapisanego w konstruktorze komponentu.

po prostu zrób to: (dla kątowej 9)

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

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

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

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 plik

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

Po prostu zmień routeReuseStrategy z kątowego routera:

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

Ustaw właściwość routera „navigated” na false:

this._router.navigated = false;

Następnie przejdź do swojego komponentu:

this._router.navigate(['routeToYourComponent'])

Następnie przywróć starą / domyślną routeReuseStrategy:

this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
          return future.routeConfig === curr.routeConfig;

Możesz również wykonać usługę z tego:

@Injectable({
  providedIn: 'root'
})
export class RouterService {

  constructor(
    private _activatedRoute: ActivatedRoute,
    private _router: Router
  ) { }

  reuseRoutes(reuse: boolean) {
    if (!reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function () {
        return false;
      };
    }
    if (reuse) {
      this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig;
      };
    }
  }

  async refreshPage(url?: string) {
    this._router.routeReuseStrategy.shouldReuseRoute = function () {
      return false;
    };

    this._router.navigated = false;

    url ? await this._router.navigate([url]) : await this._router.navigate([], { relativeTo: this._activatedRoute });

    this._router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
      return future.routeConfig === curr.routeConfig;
    };
  }
}

W moim przypadku chciałem refresh the whole pagezamiast tylko komponentu, więc tak to zrobiłem

window.location.reload();

router.navigate['/path']będzie można dostać się tylko do określonej ścieżki
wykorzystania router.navigateByUrl('/path')
go przeładowuje całą stronę

Innym sposobem na odświeżenie (trudny sposób) strony w kątowej 2, takiej jak ten , jest f5

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}