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

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吗？该表格与 my 完全分开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();
  })
}

表格组件

constructor() {


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

我创建了 observable，在构造函数中订阅了一个，并将 this.refreshData 应用到它。然后感谢我的服务，我可以在我的 saveData 服务中调用 observable。然后，我只需在表单类中调用 saveData 服务。

标签： angularhttpclientag-grid

Answer 1

在您的服务中创建Subject/ 。BehaviorSubject在extractData您的服务中的方法内，调用您刚刚声明next的 this 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'sgetData方法中，只需subscribe像service.employees这样调用：

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.service.employees.subscribe(employees => this.rowData = employees);
    this.service.getData();
  }

}