如何在 Angular 2 中的 route.navigate 之后刷新组件 UI？答案

【问题标题】：How to refresh component UI after route.navigate in Angular 2?如何在 Angular 2 中的 route.navigate 之后刷新组件 UI？
【发布时间】：2019-06-07 16:12:47
【问题描述】：

我正在尝试根据从服务中检索到的列表刷新我的 UI。像这样：

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']);

后台数据正在更新，因为我可以签入数据库以及手动刷新页面时。但是当我导航到它时，UI 没有显示更改...

我尝试了几种方法，例如this、this，还尝试了this one，但我认为我没有以正确的方式实现它...

作为附加信息，我附上页面结构：

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

我从/all跳转到/summary，我更新了/summary中的一些数据，这些数据在跳转回/all页面时必须呈现。

如何刷新 UI 或绑定到值，以便在调用 'app/tests/all' 页面时更新？

编辑：

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();
        });
    });
}

【问题讨论】：

ChangedetectorRef.detectChanges()

标签： angular angular-ui-router angular2-routing

【解决方案1】：

好的，你的问题是你用 Promise 包装了一个 observable，而 Promises 只处理 1 个异步操作，而 Observable 就像一个事件流。你可以在这里看到它们之间区别的非常好的解释：What is the difference between Promises and Observables?

因此，对于您的情况，您可以像这样直接返回一个 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();

【讨论】：

新增功能！谢谢

【解决方案2】：

也许这不是最合适的方式，但我将此添加到我需要刷新的组件的构造函数中：

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

而且成功了……

【讨论】：