Как обновить пользовательский интерфейс компонента после route.navigate в Angular 2?

Question

Я пытаюсь обновить свой интерфейс на основе полученного списка из службы. Как это:

HTML часть:

<li *ngFor="let test of testsList" class="list-inline-item">
       <div class="row m-row--no-padding align-items-center">
             <div class="col">
               <button
               [disabled]="test.locked"
               [ngClass]="{locked: test.locked, disabled: test.status == 1}"
               (click)="selectTest(test)"
               class="square"></button>
             </div>
        </div>
    </li>

Где мой testsList взят из обещания API и получен в ngOninit:

this._myService.getAllTests().then((tests: TestDto[]) => {
        this.testsList = tests;
}

Из дочернего компонента я хочу вернуться к этому компоненту (корневому) и нарисовать обновленный список тестов. Чтобы вернуться к родительскому компоненту, я использую router.navigate(...):

this._router.navigate(['app/tests/all']);

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

Я пробовал несколько вещей, таких как это , это и пробовал также это , но я думаю, что я не реализовал это правильно ...

В качестве дополнительной информации прикрепляю структуру страниц:

/tests (root page)
   |
(child pages)
   |----> all
   |---->description
   |---->....
   |---->summary

И я прыгаю с /all на /summary, я обновляю некоторые данные в /summary, которые должны отображаться при переходе на страницу /all.

Как я могу обновить пользовательский интерфейс или привязать значение, чтобы оно обновлялось при вызове страницы 'app/tests/all'?

EDIT:

getAllTests() {
    return new Promise((resolve, reject) => {
        this._testsService.getAllTests().subscribe( (result) => {
            this.tests = this.orderAsc(result.items);
            resolve(this.tests);
        }, error => {
            console.log('No tests loaded from Database');
            reject();
        });
    });
}

Answer 1

ОК, ваша проблема в том, что вы оборачиваете наблюдаемое с Promise, а Promises обрабатывает только 1 асинхронную операцию, вместо этого Observable похож на поток событий. Вы можете увидеть очень хорошие объяснения разницы между ними здесь: В чем разница между Обещаниями и Наблюдаемыми?

Таким образом, для вашего случая вы можете вернуть непосредственно наблюдаемое, как это:

getAllTests() {
  return this._testsService.getAllTests().pipe(
    map((result) => {
      this.tests = this.orderAsc(result);
      return (this.tests);
    }),
    catchError(err => ('No tests loaded from Database'))
  );
}

С помощью карты вы преобразуете результат, полученный из вашей базы данных, и getAllTests () теперь возвращает наблюдаемое, на которое вы можете подписаться в своем компоненте, например:

this._myService.getAllTests().subscribe((tests: TestDto[]) => {
  this.testsList = tests;
});

Или, что еще лучше, вместо подписки на компонент вы можете использовать асинхронный канал в html:

<li *ngFor="let test of testsList$ | async" class="list-inline-item">

И в вашем компоненте вы должны объявить переменную типа Observable :

  public testsList$: Observable<TestDto[]>;

И назначьте его функции _testsService.getAllTests () следующим образом:

this.testsList$ = this._myService.getAllTests();

Answer 2

Возможно, это не самый подходящий способ, но я добавил это в конструктор компонента, который мне нужно обновить:

this._router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
          };

И это сработало ...