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>

这个组件是从我的路由器模块调用的。当我单击 "go back" 按钮时，我希望显示已加载数据的前一个组件。

我的路线模块：

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

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

window.history.back();

这应该有效。

Answer 2

如果你想让它在导航过程中持续存在，你可以选择

LocalStorage
sessionStorage
Services

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

我建议您为 Angular

选择 @ngx-pwa/local-storage 异步本地存储

对于Angular 5:

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

在您的 RootModule 中注册它

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

}

用法

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

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

Angular5 - How go back without lose data?

typescript

angular2-routing

angular

对于Angular 5: