Cách làm mới một thành phần trong Angular

Tôi đang làm việc trên một dự án Angular. Tôi đang vật lộn với hành động làm mới trong một thành phần.

Tôi muốn làm mới các thành phần của bộ định tuyến khi nhấp vào nút. Tôi có nút làm mới khi tôi nhấp vào nó, thành phần / bộ định tuyến cần được làm mới.

Tôi đã thử window.location.reload()và location.reload()hai cái này không phù hợp với nhu cầu của tôi. Xin vui lòng giúp đỡ nếu bất cứ ai biết về nó.

Sau một số nghiên cứu và sửa đổi mã của tôi như bên dưới, tập lệnh đã hoạt động với tôi. Tôi chỉ thêm điều kiện:

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

Sử dụng this.ngOnInit (); để tải lại cùng một thành phần thay vì tải lại toàn bộ trang !!

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

        this.ngOnInit();

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

Thêm điều này vào mã vào phương thức khởi tạo của thành phần được yêu cầu đã làm việc cho tôi.

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

Đảm bảo unsubscribetừ mySubscription này trong ngOnDestroy().

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

Tham khảo chuỗi này để biết thêm chi tiết - https://github.com/angular/angular/issues/13831

May mắn thay, nếu bạn đang sử dụng Angular 5.1+, bạn không cần phải thực hiện hack nữa vì hỗ trợ gốc đã được thêm vào. Bạn chỉ cần đặt onSameUrlNavigation để 'tải lại' trong các tùy chọn RouterModule:

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

Bạn có thể tìm thêm thông tin tại đây: https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

cái này hơi lỗi và tôi không biết liệu điều này có giúp được bạn hay không nhưng bạn đã thử

this.ngOnInit();

nó là một chức năng vì vậy bất kỳ mã nào bạn có trong đó sẽ được gọi lại giống như làm mới.

chỉ cần làm điều này: (cho góc 9)

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

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

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

Điều này có thể đạt được thông qua một bản hack, Điều hướng đến một số thành phần mẫu và sau đó điều hướng đến thành phần mà bạn muốn tải lại.

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

Trong ứng dụng của tôi, tôi có thành phần và tất cả dữ liệu đến từ API mà tôi đang gọi trong hàm tạo của Thành phần. Có nút mà tôi đang cập nhật dữ liệu trang của mình. khi nhấp vào nút, tôi có lưu dữ liệu ở phần cuối và làm mới dữ liệu. Vì vậy, để tải lại / làm mới thành phần - theo yêu cầu của tôi - chỉ là làm mới dữ liệu. nếu đây cũng là yêu cầu của bạn thì hãy sử dụng cùng một đoạn mã được viết trong hàm tạo của thành phần.

Một cách khác không có tuyến đường rõ ràng:

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

tệp html

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

tập tin ts

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

Cách khác để làm mới (cách khó) một trang ở góc 2 như thế này, nó trông giống như f5

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

constructor(private location: Location) {}

pageRefresh() {
   location.reload();
}