Angular5 - 如何在不丢失数据的情况下返回？

Question

我正在使用 Angular5，我无法在不丢失数据的情况下返回浏览器。我的意思是，之前的组件可以再次加载它们的数据。

例子:

在我的组件中:

import { Location } from '@angular/common';
@Component({
  selector: 'app-mant-cert-certificacion',
  templateUrl: './mant-cert-certificacion.component.html',
  styles: []
})

export class MantCertCertificacionComponent implements OnInit {

constructor(private location: Location) {
  }
goBack() {
    this.location.back();
    console.log( 'goBack()...' );
  }
}

mant-cert-certificacion.component.html:

<a href="javascript:void(0)" (click)="goBack()">
            <- Back
</a>

这个组件，它是从我的路由器模块中调用的。当我单击“返回”按钮时，我希望显示加载了数据的前一个组件。

我的路线模块:

export const routes: Routes = [
  { path: 'xxxx', children: [
    { path: '', component: XComponent},
  ]},
  { path: 'yyyy', children: [
    { path: 'contractdetail/', component: MantCertCertificacionComponent}
  ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class MantenedoresCertRoutingModule { }

一些想法？

前一个组件将是“XComponent”。信息的内容(属性或变量)无关紧要。我只想加载他们的数据。

谢谢!

Answer 1

如果你想让它在导航过程中持续存在，你就去

1. 本地存储
2. session 存储
3. 服务

localStorage 和 sessionStorage 完成完全相同的事情并具有相同的 API，但是对于 sessionStorage，数据仅保留到窗口或选项卡关闭，而使用 localStorage 时，数据会一直保留到用户手动清除浏览器缓存或直到您的网络应用程序清除数据。

我建议您选择 @ngx-pwa/local-storage Angular 的异步本地存储

对于 Angular 5:

npm install @ngx-pwa/local-storage@5

在你的 RootModule 中注册它

import { LocalStorageModule } from '@ngx-pwa/local-storage';

@NgModule({
  imports: [
    BrowserModule,
    LocalStorageModule,
    ...
  ]

注入(inject)并使用

import { LocalStorage } from '@ngx-pwa/local-storage';

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

用法

let user: User = { firstName: 'Henri', lastName: 'Bergson' };

this.localStorage.setItem('user', user).subscribe(() => {});

服务
创建服务并将其注册到 Angular 模块。

why? If you want an instance of a dependency to be shared globally and share state across the application you should configure it on the NgModule.

Sharing Data with BehaviorSubject