Question

我正在使用网格API，ag-grid。为了将数据发送到网格，在组件类中创建了一个名为rowData的变量。在此TableComponent中，我有一个函数refreshData。此功能使用服务从服务器获取数据，然后将其显示到网格中：

export class TableComponent implements OnInit {
  private rowData: any;
  private columnDefs;

  constructor(
    private service: Service,
    private http: HttpClient,
    vcr: ViewContainerRef,
    public dialog: MatDialog, 
    private fb: FormBuilder
  ) {
    this.columnDefs = [{
        headerName: 'id',
        field: 'id',
        hide: true
      },
      {
        headerName: 'First Name',
        field: 'firstName'
      }
    ];
  }

  ngOnInit() {
    this.refreshData();
  }

  refreshData() {
    this.service.getData('http://localhost:3000/employees')
      .subscribe(data => {
        this.rowData = data;
      })
  }

}

我有一个单独的组件来创建表格。当我单击TableComponent中的按钮时，将弹出表格。用户可以从此处单击保存按钮将其数据保存到网格。这是服务和组件：

服务

getData(url: string): Observable < any > {
  return this.http.get(url).pipe(
    map(this.extractData),
    catchError(this.handleErrorObservable));
}

private extractData(res: Response) {
  let body = res;
  console.log(res)
  return body || {};
}

saveUser(employee: Employees) {
  return this.http.post(this._url, employee, httpOptions).subscribe((res: any) => {
    res = employee
    this.getData('http://localhost:3000/employees')
  })
}

组件保存

employeeInfo: Employees; //my model

onSave() {
  this.employeeInfo = this.frmUser.getRawValue();
  this.service.saveUser(this.employeeInfo);
  //Here I would somehow refresh the data
  this.dialogRef.close({
    success: 'success'
  });
}

现在，刷新表的方法是在TableComponent类中使用间隔函数。这仅需要几秒钟来执行功能refresData以获取数据并更新表。但这不是一个好习惯，因为我的应用会在不需要时不断发出http请求。

问题：如何在FormComponent类中使用我的refreshData函数？我希望每次单击保存按钮时都更新rowData变量。 EventEmitters有可能吗？该表格与我的TableComponent完全分开，因此我认为这是可能的。谢谢。

好吧，我知道了！ **服务：**

private componentMethodCallSource = new Subject<any>();

componentMethodCalled$ = this.componentMethodCallSource.asObservable();

saveUser(employee: Employees) {
  return this.http.post(this._url, employee, httpOptions).subscribe((res: any) => {
    res = employee
    this.componentMethodCallSource.next();
  })
}

TableComponent

constructor() {


  this.service.componentMethodCalled$.subscribe(
    () => {
      this.refreshData()
    }
  )
}

我创建了可观察对象，在构造函数中订阅了一个，并将this.refreshData应用于它。然后借助我的服务，我可以在saveData服务中调用可观察对象。然后，我只在表单类中调用saveData服务。

Answer 1

在您的服务中创建一个Subject / BehaviorSubject。在服务的extractData方法内，在您刚刚声明的next / Subject上调用BehaviorSubject方法。

然后在您的TableComponent中订阅此Subject / BehaviorSubject。每次更改时，您都会获得更新的值。

这就是我的意思：

employees: BehaviorSubject<any> = new BehaviorSubject<any>(null);

getData(url: string): Observable < any > {
  return this.http.get(url).pipe(
    map(this.extractData),
    catchError(this.handleErrorObservable));
}

private extractData(res: Response) {
  let body = res;
  console.log(res)
  // Assuming that body here has an array of Employee Objects.
  employees.next(body);
  return body || {};
}

saveUser(employee: Employees) {
  return this.http.post(this._url, employee, httpOptions).subscribe((res: any) => {
    res = employee
    this.getData('http://localhost:3000/employees')
  })
}

现在在您的TableComponent中，而不是调用Service的{{1}}方法，只需在getData上调用subscribe，如下所示：

service.employees

Angular / Aggrid：如何在单独的组件中使用组件功能（无关系）

1 个答案: