Question

我是Angular的新手，正在开发一个基本的应用程序。我有几个同级组件，其中之一是按钮。通过单击按钮，我必须在其他组件中触发几个功能。（单击按钮会在数组中填充数据，因此也许在数组发生更改时可以触发功能。）如何做到这一点？

我尝试过：@ Input- @ Output，EventEmmiters，服务，Observables和Subscription，@ Viewchild并没有成功...数据在组件之间传输，但是没有调用任何函数。还有其他想法吗？（或者我尝试过的例子，也许我做错了什么）

服务：

import { Injectable, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class VisualService {

  public dataArray = [];

  private dataSource = new BehaviorSubject(this.dataArray);
  currentArray = this.dataSource.asObservable();

  constructor() { }

  updateData(array) {
    this.dataSource.next(array);
    this.dataArray = array;
    console.log(this.dataArray);
  }
}

我要从中触发功能的组件

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { DialogComponent } from '../dialog/dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { MatTable } from '@angular/material/table';
import { VisualService } from '../services/visual.service';


@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})

export class TableComponent implements OnInit {

  @ViewChild('dataTable', { read: MatTable, static: false }) dataTable: any;

  @Input() public formDataArray;

  public dataArray = [];

  displayedColumns: string[] = ['position', 'name', 'surname', 'age', 'action'];

constructor(public dialog: MatDialog, private _visualService: VisualService) { }

  openDialog(customer) {
    this.dialog.open(DialogComponent);
  }

  ngOnInit() {
    this._visualService.currentArray
      .subscribe(arrayData => {
        this.dataArray=arrayData
        console.log(this.dataArray)
        //this.dataTable.renderRows(); -- this is the line that i want to use to redraw a Angular Mat table...but it displays that the table is undefined...//

      });
  }

Answer 1

使用mat-table时，实际上应该直接将observable连接到数据源，而不是将其存储在数组中。物料表将为您处理订阅时，无需自己处理订阅。

组件：

constructor(readonly dialog: MatDialog, readonly visualService: VisualService) { }

模板：

<table mat-table [datasource]="visualService.currentArray">
  ...
</table>

原始

要执行的操作是创建一个全局服务，然后在该服务中指定一个主题。订阅需要从主题触发的任何组件中的主题。单击该按钮后，更新主题。

服务

private readonly source = new Subject<any[]>();
readonly dataChanged = this.source.asObservable();

updateData(data: any[]) {
  this.source.next(data);
}

P.S。确保在组件销毁时取消订阅主题，我建议使用takeUntil模式。

/** Handle on-destroy Subject, used to unsubscribe. */
private readonly destroyed = new ReplaySubject<void>(1);

ngOnInit() {
  this.service.dataChanged.takeUntil(this.destroyed).subscribe(
    (data: any[]) => {
      // Do what you need here
    }
  );
}

ngOnDestroy() {
  // Unsubscribes all pending subscriptions.
  this.destroyed.next();
}

如何在同级组件中单击（或更改）时执行多个功能？

1 个答案:

原始