Как редактировать модель, отслеживать изменения и проверять несколько компонентов в Angular - PullRequest
Новая
       90

Как редактировать модель, отслеживать изменения и проверять несколько компонентов в Angular

0 голосов
/ 27 февраля 2019

Сценарий

  • У меня сложная структура данных (модель), которую я загружаю с использованием службы 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 или 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) { }
}
...