在离开页面或更改Angular组件中的参数之前保存数据

Question

给出以下路径：

const appRoutes: Routes = [
  { path: '', component: ListComponent },
  { path: 'items/:id', component: ItemOutletComponent,
    children:[
      { path: '', component: Section1Component },
      { path: 'page2', component: Section2Component, },
    ]
  }];

如何确保applyChanges()上的自定义方法Section1Component每次分别响应Section2Component：

1. 用户离开页面
2. :id网址参数更改
3. 作为奖励问题，当用户关闭浏览器时也是如此？

我当前在ItemOutletComponent中加载资源模型，我在每个部分组件上创建FormGroup：

ngOnInit() {
  this.formGroup = new FormGroup({
     section1: new FormGroup({
       prop1: new FormControl(),
       prop2: new FormControl()
  });
  this.formGroup.pathValue(this.model);
}

applyChanges() {
  Object.assign(this.model, this.formGroup.value);
}

我需要做的就是确保在适当的时候将formGroup更改应用回模型。页面上没有保存按钮。

Answer 1

您可以使用导航事件来检测用户是否将导航到其他位置（或不导航）并执行所需的操作

https://angular.io/guide/router#router-events

奖励答案： 您将必须使用本机JS事件，例如windiw:unload和window:beforeunload

How can we detect when user closes browser?

但是在某些情况下它不起作用（例如，杀死浏览器），但这完全取决于浏览器