Невозможно разделить службу Observable Subject между компонентами внуков в Angular 5 - PullRequest
Новая
       25

Невозможно разделить службу Observable Subject между компонентами внуков в Angular 5

0 голосов
/ 07 декабря 2018

У меня есть приложение, в котором я использую угловой степпер cdk и пытаюсь обмениваться данными между общим компонентом внука в обоих дочерних компонентах шага.

Первый дочерний элемент передает данные взаполнить внука, но проблема, по-видимому, заключается в том, что степпер инициализирует оба компонента одновременно, и, поскольку первый дочерний элемент должен выполнить вызов службы для заполнения внука, дочерний элемент второго дочернего элемента инициализируется с неполными данными.

parent.component.html: 

<app-custom-stepper>
<cdk-step [stepControl]="frmStep1" #step1="cdkStep">
<ng-template cdkStepLabel>Step1</ng-template>
    <form #frmStep1="ngForm">
        <child1 [myData]="myData"></child1>
    </form>
    <button cdkStepperPrevious>Prev</button>
    <button cdkStepperNext>Next</button>
</cdk-step>
<cdk-step cdkStep #step2="cdkStep">
    <form #frmStep2="ngForm">
        <child2></child>
    </form>
    <button cdkStepperPrevious>Prev</button>
    <button cdkStepperNext>Next</button>
</cdk-step>

parent.service.ts 

export class ParentService {
  myData:Subject<any> = new Subject<any>();

  setMyData(data: any) {
     this.myData.next(data);
  }

  getMyData(): Observable<any> {
     return this.myData.asObservable();
  }
}

child1.component.html: 

<sharedGrandchild [myData]="myData"></sharedGrandchild>

child2.component.html 

<sharedGrandchild></sharedGrandchild>

grandchild.component.ts: 

@Input() myData:MyData;
ngOnInit() {
  if(this.myData) {
    //call service that populates data, this only happens on the page
    //step of the stepper
    this.parentService.setMyData(response);
  } else {
    this.parentService.getMyData()
      .subscribe( myData => {
        this.myData = myData 
      }
   };

То, что я пробовал:

Использование BehaviorSubjects иСубъекты (как в приведенном выше коде) Использование переключателя для задержки инициализации второго дочернего компонента. Попытка использовать другие ловушки жизненного цикла для инициализации подписки для второго дочернего компонента.

Проблема заключается в синхронизации, которая запрашивает первыйВозврат детей через внука занимает слишком много времени, поэтому возвращение внука второго ребенка подписывается на объект, который присутствует только частично.Это никогда не обновляется.Таким образом, первый дочерний элемент на странице загружается нормально, поскольку он напрямую обращается к службе, а второй дочерний элемент на второй странице степпера содержит неполные данные из-за инициализации в то же время.

1 Ответ

0 голосов
/ 07 декабря 2018

Чтобы обеспечить асинхронный обмен данными, выполните следующие действия:

1.Используйте BehaviorSubject для сохранения последних установленных значений. 

   myData:Subject<any> = new BehaviorSubject<any>(null);

2.Читайте и устанавливайтеданные в функции ngAfterViewInit вместо ngOnInit

@Input() myData:MyData;
ngAfterViewInit() {
  if(this.myData) {
    //call service that populates data, this only happens on the page
    //step of the stepper
    this.parentService.setMyData(response);
  } else {
    this.parentService.getMyData()
      .subscribe( myData => {
        this.myData = myData 
      }
   };

3. Убедитесь, что в общем модуле, основном модуле или корневом модуле имеется ParentService.

...