时间戳

首页 > 解决方案 > 在 sidenav 中编辑表单后重新获取/重新加载组件中的数据

angular - 在 sidenav 中编辑表单后重新获取/重新加载组件中的数据

问题描述

我有一个组件调用 startpage 和一个 sidenav 组件来添加/编辑项目到 startpage。两个组件在 app.component.html 上都有选择器。在 sidenav 组件中添加/编辑项目后，我想重新加载起始页组件的数据。我已经使用路由器上的导航，使用ngOnInit但没有任何反应。那么我能做些什么来解决我的问题呢？

*注：我在startpage中放的数据显示在mat-grid-listor中mat-table（我有一个mat-button-toggle要改变显示的方式）

标签： angularangular-material

解决方案

您可以通过使用下面的示例代码之类的服务来做到这一点。我会给你一个例子，所以希望你能够根据你的要求使用它。

首先创建如下服务：

import { Injectable } from '@angular/core';
import {Subject } from 'rxjs';

@Injectable()
export class DataService {
subject$: Subject<any> = new Subject<any>();
  constructor() { }

 refreshData() {
   this.subject$.next();
 }
}

然后在您EventypeSidenavComponent使用它时：

export class EventypeSidenavComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit() {
  }
  edit() {
    this.dataService.refreshData();
  }
}

然后StartpageComponent您必须使用该服务，例如：

export class StartpageComponent implements OnInit {

  constructor(private dataService: DataService) { }

  ngOnInit() {
    this.dataService.subject$.subscribe(() => {
       //refresh your  data here
    });
  }

}

也可以在这里找到演示。

您可以根据您的要求匹配此样本。

推荐阅读