如何在Angular中跨多个组件编辑模型，跟踪更改和验证

Question

场景

• 我有一个使用http服务加载的复杂数据结构（模型）
• 我需要在多个页面上对其进行编辑，然后保存为一个整体。

模型看起来像这样：

{
   name: string,
   subsection1: {
      someArray: Array<{key: string, value: string}>
   }
   subsection2: { … }
   ...
}

我有以下组件，它们将模型结构映射到我进行编辑的地方

const appRoutes: Routes = [
  { path: 'item/:id', component: ItemComponent,
    children:[
      { path: '', component: ItemDetailsComponent },
      { path: 'subsection1', component: ItemSubsection1Component },
      { path: 'subsection2', component: ItemSubsection1Component },        ]
  },
];

问题

在ItemComponent和ItemDetails组件中，如何检查该组件是否已更改？

子问题

我还将需要执行一些验证，因此，我不仅需要进行isDirty检查，还需要isValid resp hasErrors检查。我之所以提到它，是因为我知道 FormModule 或 ReactiveFormsModule 中有一些验证和更改跟踪机制。

我已经拥有的东西

因为我需要在多个页面之间共享模型实例，所以我创建了存储该实例的服务类：

export class StateService {
  currentItem: ItemModel;
}

然后将其注入到组件中，然后通过对其进行突变来编辑模型

@Component({
  template: `
    <ul><li *ngFor="let element in this.state.currentItem.subsection1.someArray">
      Key: <input [(ngModel)]="element.key" />
    </li></ul>`})
export class ItemSubsection1Component {
  constructor(public state: StateService) { }
}