对于Angular 5：

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

如果您希望它在导航过程中持续存在，请选择

LocalStorage
sessionStorage
Services

localStorage和sessionStorage可以完成完全相同的操作并具有相同的API，但是使用sessionStorage时，数据将一直保留到关闭窗口或选项卡，而使用{{1 }}数据将一直保留，直到用户手动清除浏览器缓存或您的Web应用清除数据为止。

我建议您使用 @ngx-pwa/local-storage 异步Angular本地存储

对于Angular 5：

localStorage

在您的RootModule中注册

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

注入并使用

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

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

用法

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

@Injectable()
export class YourService {

  constructor(protected localStorage: LocalStorage) {}

}

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

为什么？如果您希望全局共享一个依赖项实例，在应用程序中共享let user: User = { firstName: 'Henri', lastName: 'Bergson' }; this.localStorage.setItem('user', user).subscribe(() => {});，您应该在 state

Sharing Data with BehaviorSubject

Answer 2

Angular在其历史记录中保留路线详细信息。

window.history.back();

这应该有效。

Angular5-如何返回而不丢失数据？

2 个答案:

对于Angular 5：