typescript - Giữ dữ liệu giống nhau khi trang được làm mới trong Angular 6

Tôi đang lấy dữ liệu khi nhấn nút từ WebAPI và điều hướng component sang component khác để hiển thị dữ liệu này và mẹo này hoạt động tốt cho tôi nhưng vấn đề là khi tôi làm mới trang, dữ liệu của tôi bị trống. Vui lòng cung cấp cho tôi một số giải pháp hoặc ví dụ để giữ nguyên dữ liệu. Cảm ơn trước.

component.ts //nơi tôi đang lấy dữ liệu khi nhấn

onSubmit(){
this.departmentService.GetDepartmentSearchResults(this.modelSearch1.value.Department, this.modelSearch1.value.Year, this.modelSearch1.value.No).subscribe(res => {
      this.objDepartmentsSearchedResults = res as DepartmentsSearchedResultsModel[];
      this.departmentService.objDepartmentsSearchedResults = this.objDepartmentsSearchedResults;
      this._router.navigate(['departments/search-results']);
    });
}

service.ts //nơi tôi đang truyền dữ liệu vào biến

objDepartmentsSearchedResults: DepartmentsSearchedResultsModel[];

Component.ts khác //nơi tôi muốn hiển thị dữ liệu này

ngOnInit(){
    console.log("results listing : ", this.departmentServices.objDepartmentsSearchedResults);
}

Câu trả lời #1

Bạn có thể sử dụng một cái gọi là localStorage cho phép bạn lưu dữ liệu của mình trong bất kỳ thành phần nào và sử dụng nó trong bất kỳ thành phần nào khác.

Vì vậy, trong trường hợp của bạn, bạn chỉ cần đưa dữ liệu của biểu mẫu vào lưu trữ cục bộ và sử dụng nó trong một thành phần khác.

Vui lòng tham khảo điều này về cách sử dụng nó.

https://medium.com/@tiagovalverde/how-to-save-your-app-state-in-localstorage-with-angular-ce3f49362e31

Câu trả lời số 2

Bạn có thể sử dụng localStorage/sessionStorage để lưu trữ và truy xuất dữ liệu.

Nhưng, cách tiếp cận tốt nhất là lấy dữ liệu của một tuyến (trang) từ chính trang đó.

Giả sử bạn đang định tuyến từ

items(ItemListComponent) --> items/:id(ItemDetailsComponent)

Bạn có thể truyền dữ liệu mục liên quan đến một id từ trang items (ItemListComponent). Vì vậy ItemDetailsComponent có thể không cần gọi thêm để lấy dữ liệu.

• Nếu items/:id được tải trực tiếp (bởi người khác) hoặc làm mới, dữ liệu được truyền từ trang items sẽ bị mất.
• Vì vậy bạn phải có một điều kiện để lấy dữ liệu nếu dữ liệu được truyền vào là không xác định. Bạn có thể làm điều đó vì tất cả những gì bạn cần là :id, mà bạn đã có dưới dạng tham số của route

Theo ví dụ của bạn, hãy xem xét việc truyền Department, Year, No như các tham số truy vấn của đường dẫn. Nếu dữ liệu được truyền từ trang trước, hãy sử dụng dữ liệu đó. Nếu không, thực hiện gọi server với những tham số truy vấn đó (khi làm mới trang hoặc khi trang được tải trực tiếp khi người khác truy cập đường dẫn đó).

trang1.component.ts

onSubmit(){
  const {Department, Year, No} = this.modelSearch1.value;
  this._router.navigate([`departments/search-results?department=${Department}&year=${Year}&no=${No}`]);
}

trang2.component.ts

ngOnInit(){
  this.activatedRoute.queryParams.subscribe(params => {
    const Department = params.get('department');
    const Year = params.get('year');
    const No = params.get('no');

    // make departmentServices call to get data
    ...
  });
}