刷新Angular 4中的父组件视图

Question

我有2个组件，比方说， Component A是一个列表视图，而Component B是一个详细视图。 列表视图中的每一行都是可单击的，单击后将重定向到Component B

Component B允许编辑和保存详细信息。 我在Component B添加了“ Back按钮，以使我可以返回列表视图。

但是我遇到的问题是我看不到更新的列表视图，而必须手动刷新浏览器，然后才能在此处看到更新的列表。

我已经尝试过直接使用window.location ，它可以工作，但实际上我不喜欢这种方法。

public back() {
   window.location.assign('/listview');
}

我想知道是否有更好的方法来解决这个问题？

更新：

public onSelected(model: MyModel) {
    const detailsViewUrl = `/detailsview/${model.id}`;
    this._router.navigateByUrl(detailsViewUrl );
  }

Answer 1

听起来这是更改数组内容时Angular的更改检测问题。 看这里：

角度2：如何检测阵列中的变化？ （@input属性）

这个问题中的解决方案应该可以工作，但是我过去用来迫使Angular识别数组中的更改的一种简单方法是在进行更改后重新分配数组：

myArray = [...myArray];

Answer 2

在后退按钮上使用以下路由功能单击

public back() {
   this._router.navigateByUrl('/listview')
}
or
public back() {
   this._router.navigate('/listview')
}

Answer 3

尝试这个，

只是在内部再次调用了列表视图并同时命中db，所以更新的值将显示在列表视图中。

使用以下命令调用路线：

this.router.navigate(['/listview']);

Answer 4

似乎是一个更改检测问题，有一些方法可以手动触发更改检测，如下所示：

1. 注入ChangeDetectorRef 。

2. 当您返回时调用它，如下所示：

    public back() { ChangeDetectorRef.detectChanges() } 

参见： 在Angular中手动触发变更检测

Answer 5

您可以使用在Parent上的方法发出@Output EventEmitter，该方法在事件中使用存储在组件中的变量来查找更改，如下所示：

@Output someOutput: EventEmitter = new Event Emitter<any>;

HTML：

  <b-component (someOutput)=getOutput($event)></b-component>

AComponent：

 getOut(event){
     let output = event;
     if(this.something != output){
          this.ngOnDestroy(); // or something that you can use to make it
    }

那应该按预期工作。