Question

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

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

但我遇到的问题是我看不到更新的列表视图，必须手动刷新浏览器，然后我可以在那里看到更新的列表。

我已尝试直接使用window.location并且它可以正常工作，但我真的不喜欢这种方法。

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

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

更新

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

Answer 1

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

Angular 2: How to detect changes in an array? (@input property)

这个问题中的解决方案应该有效，但我过去用来强制更改数组中的更改以便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

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

注入ChangeDetectorRef。

当你这样回去时给它打电话：

public back() {
   ChangeDetectorRef.detectChanges()
}

请参阅：Triggering change detection manually in 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
    }

这应该按预期工作。

刷新Angular 4中的父组件视图

5 个答案: