Компонент в Angular используется в модальном и странице

Question

Справочная информация для моей задачи: Я создаю ленту комментариев. На главной странице справа есть лента комментариев, в ней показаны 3 самых последних комментария. Если имеется более 3 комментариев, появляется ссылка с надписью «Показать все» и открывается модальное окно, отображающее ВСЕ комментарии.

Проблема, с которой я столкнулся: данные динамически обновляются на главной странице, и когда я открываю модальную страницу, в них появляются новые комментарии / ответы. В модальном режиме, когда я добавляю новый комментарий, а затем закрываю модальный, новый комментарий будет отображаться в ленте комментариев на боковой панели. НО, если я добавлю ответ, а затем закрою модальный, ответ не будет отображаться в основном фиде комментариев.

Архитектура фида комментариев:

У меня есть один компонент, называемый «comment-feed», затем проходит по массиву комментариев, и каждый дочерний элемент массива comment вызывает компонент «comment», передавая данные этого специального комментария. (фрагмент ниже из comment-feed.component. html)

 <ng-container *ngFor="let comment of commentArray.slice(0, 3)">
    <comment [data] = comment></comment>
</ng-container>
<div class = "row anchor-link-blue show-all" *ngIf="commentArray.length > 3">
  <a class = "col-md-12 right-link" (click)="showAllComments()">Show All</a>
</div>

фрагмент ниже показывает итерацию модального (аналогично комментарию), и находится в шаблон в нижней части comment-feed.component. html

  <ng-container *ngFor="let comment of commentArray">
    <comment [data] = comment></comment>
    </ng-container>

Компонент комментариев содержит всю разметку и стили для текущего комментария. В конце разметки комментария он перебирает this.comment.children, чтобы показать ответы. (фрагмент ниже из comment.component. html)

 <ng-container *ngFor="let child of displayedChildren">
  <div class = "reply">
    <h5>{{child.userId}}</h5>
    <div class="reply-body">
      <p class = "small reply-text">
        <ng-container>
          {{child.displayedComment}}
        </ng-container>
        <p class = "reply-date">{{child.date}}</p>
     </div>
  </div>
</ng-container>

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

КОД TS: Существует файл comment-service.ts, который обрабатывает все API звонки.

comment-feed.component.ts:

    this. _commentsService.postComment(this.commentInput, this.topicId).subscribe(data => this.addNewComment(data));

 addNewComment(data) {
    if (data) {
      this.commentArray.unshift(data);
      this.commentText.nativeElement.value = "";
    }
  }

comment.component.ts:

replyPostPressed(text, rootId, topicId) {
    this._commentsService.postReply(text, rootId, topicId).subscribe(data => {
       let updateComment = this._commentPanel.commentArray.filter(comment => comment.id === rootId);
       let remainingComments = this._commentPanel.commentArray.filter(comment => comment.id !== rootId);

      if (this.children != undefined) {
        updateComment[0]['children'].unshift(data);
      } else {
        updateComment[0]['children'] = [data];
        } 
        remainingComments.push(updateComment[0]);
        this._commentPanel.commentArray = remainingComments.sort((a,b) => (a.date < b.date) ? 1 : ((b.date < a.date) ? -1 : 0));
        this.children = updateComment[0]['children'];
        this.displayedChildren = this.children.slice(0,3);
    });
  }

Я не МОГУ за свою жизнь выясните, почему ответы на главной странице не будут обновляться после того, как ответ сделан на модальном. Я перепробовал все !!! Я хотел бы получить совет / помощь.

PS модал открывается так:

  showAllComments()  {
    this.modalRef = this._modalService.show(
      this._showAllOverlay,
      Object.assign({}, { class: 'modal-lg' })
      );
  }