Angular 2 不刷新视图 route.navigate

Question

我已经构建了一个与 REST 通信的 CRUD 应用程序 api，但还没有找到在删除一个项目后刷新视图的方法。我过去曾使用 router.navigate 在其他方法（例如 create 方法）之后更改视图，并且效果很好。

问题是调用 delete 方法的事件在同一项目列表中（每个 *ngFor 项目都有自己的删除事件）。因此，如果我删除一个项目，然后我使用 router.navigate 转到当前视图，它什么都不做，因为你已经在那里，因此即使它有效，也看不到没有删除项目的视图的更新版本。

有没有其他方法可以不使用 route.navigate 来刷新视图？

编辑：

我已尝试实施 ChangeDetectorRef，但仍然无法正常工作...

组件如下：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { ApiNoticiasService } from './api-noticias.service';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
  moduleId: module.id,
  selector: 'app-noticias',
  templateUrl: 'noticias.component.html',
  styleUrls: ['noticias.component.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [ApiNoticiasService]
})
export class NoticiasComponent implements OnInit {
  noticias: any;

  constructor(
    private cd: ChangeDetectorRef,
    private _apiNoticias: ApiNoticiasService) { }

  ngOnInit() {
    this._apiNoticias.getNoticias()
      .then( (noticias) => this.noticias = noticias)
      .catch((err) => {
        console.log(err);
      });
  }

  deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
  }

}

这是服务中的方法：

deleteNoticia(id) {
    return this._http.delete('http://localhost:3000/noticias/' +id)
      .map((response: Response) => response.json())
      .toPromise()
      .catch((err: any) => {
        console.log(err); 
        return Promise.reject(err);
      });
  }

Answer 1

您要查找的主题是变更检测。官方文档似乎还没有抽出时间来谈论它，但 this blog post 对其进行了相当深入的解释。

我猜你正在使用推送更改检测，因为默认情况下会检查每个事件的所有内容，并且应该已经自动捕获你的删除。您可以放弃它并返回默认设置，但您会失去希望从该设置中获得的任何性能提升。

为了保持推送更改检测，与您的问题相关的部分大约位于页面下方的 3/4。您需要在显示项目的组件中注入一个ChangeDetectorRef，并在发生删除时调用markForCheck()。

编辑：在查看您的代码时，您的问题实际上是您实际上没有更新视图中的数据。服务器可能删除了项目，但客户端的本地副本还在。

您需要通过适当更改 noticias 手动删除本地数据，或者从服务器重新获取整个批次并用新获取的结果替换本地缓存，方法与您相同在 ngOnInit。后一个选项必须在删除承诺的 .then() 内完成，否则获得正确的结果将受到竞争条件的影响。

Answer 2

实际上你的删除函数应该是这样的。

deleteNoticia(id){
    this._apiNoticias.deleteNoticia(id)
      .catch((err) => {
      console.log(err);
      });
    this.cd.markForCheck();
    this.ngOnInit();
  }

需要再次调用ngOnInit()函数才能再次获取列表。

Angular 2 不刷新视图 route.navigate

Angular 2 refreshing the view without route.navigate

angular2-router

angular