Angular 6个组件重新绑定

Question

我有一个名为 Dashboard 的 Angular 组件。该组件显示包含数据的仪表板页面。我还有一个菜单组件。当我在仪表板页面中时，我单击一个菜单项，它会打开一个弹出屏幕。弹出窗口不过是一个隐藏的div，可以制作visible/invisible。我在这个弹窗中添加了一个新的交易项目，将其保存到数据库中并在显示信息警报后关闭弹窗。

我想要的是确保仪表板能够在弹出窗口中点击保存后立即刷新或重新绑定新添加的数据。

我尝试了以下方法： 1) 使用 Router.Navigate。我的浏览器 URL 总是 localhost:4200/Dashboard 并且这段代码似乎没有重新加载路由

saveTransaction() {
this.addTnxBtn = true;
this.services.addTransaction(this.newTnx).subscribe((data) => {
  if (data.mStatus == "Success") {
    this.success = true;
    this.addTnxBtn = false;
    this.Failed = false;
    this.router.navigate(['/dashboard']);
  } else {
    this.success = false;
    this.Failed = true
    this.addTnxBtn = false;
  }
})

}

2) 重新创建Dashboard组件，调用函数重新绑定。 dbcomponent.ngOnInit 应该调用 api 服务并将数据重新绑定到仪表板

saveTransaction() {
this.addTnxBtn = true;
this.services.addNewSwiftTransaction(this.newTnx).subscribe((data) => {
  if (data.mStatus == "Success") {
    this.success = true;
    this.addTnxBtn = false;
    this.Failed = false;
    let dbcomponent = new DashboardComponent(this.services);
    dbcomponent.ngOnInit();

  } else {
    this.success = false;
    this.Failed = true
    this.addTnxBtn = false;
  }
})

}

ngOnInit() {
this.count = new dashboardClass()
this.services.getDashboardCount().subscribe((data) => {
  if (data.mStatus == "Success") {
    this.dashData = data.responseData
  } else {
    console.log(data.mStatus)
  }
})

}

所以我被这个问题困住了，我可以从我的菜单组件中引用已经加载的仪表板组件吗？是否有任何其他方法可以再次重新加载组件以进行重新绑定？

Answer 1

完成您的工作后，您可以使用 Router.Navigate，如下所示：

constructor() {private _router: Router}
this._router.routeReuseStrategy.shouldReuseRoute = () => {
            return false;
 }; // to reload your component on same page
this._router.navigate(['/fsf']); // this will work

Answer 2

你需要的是组件之间的通信。

使用 BehaviourSubject 创建服务并在仪表板组件中订阅它，您可以在其中再次获取响应。
每当您从模态中添加新记录时，发出该值，您将在您订阅的仪表板中再次点击以获取网格数据。

这样您也不必重新加载页面。

Angular 6个组件重新绑定

Angular 6 component re-binding

angular

angular6