如何从Angular 6中的另一个类调用类中的函数?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何从Angular 6中的另一个类调用类中的函数?相关的知识,希望对你有一定的参考价值。

这是我的代码:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AuthService } from '../core/auth.service';
import { MatRadioButton, MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
import { OrdersService } from '../orders.service';

export interface DataTableItem {
  ordersn: string;
  order_status: string;
  update_time: number;
}

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

export class HomeComponent implements OnInit {
  radioValue: number;
  dataSource = new UserDataSource(this.orderService);
  selection = new SelectionModel<any>(true, []);

  // Sorting and pagination
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  // Columns displayed in the table. Columns IDs can be added, removed, or reordered.
  displayedColumns = ['ordersn', 'order_status', 'update_time'];

  // Filter
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  // Whether the number of selected elements matches the total number of rows.
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }

  // Selects all rows if they are not all selected; otherwise clear selection.
  masterToggle() {
    this.isAllSelected() ?
      this.selection.clear() :
      this.dataSource.data.forEach(row => this.selection.select(row));
  }

  constructor(public auth: AuthService, private orderService: OrdersService) {
  }

  onSelectionChange(radioselection: MatRadioButton) {
    this.radioValue = radioSelection.value;
    console.log(this.radioValue);
  }

  ngOnInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }
}

export class UserDataSource extends MatTableDataSource<any> {
  constructor(private orderService: OrdersService) {
    super();

    this.orderService.GetOrdersList().subscribe(d => {
      this.data = d.orders;
    });
  }

  radioFilter() {
    const array = [];

    this.orderService.GetOrdersList().subscribe(d => {
      for (const entry of d.orders) {
        if (entry.order_status === 'READY_TO_SHIP') {
          array.push(entry);
        }
      }

      this.data = array;

      console.log(array);
    });
  }
}

我想从radioFilter()打电话给HomeComponent。我尝试过的:

  • @ViewChild中实现HomeComponent但是我会得到这个错误:Class'UserDataSource'在声明之前使用。
  • 导入UserDataSource然后添加到HomeComponent中的构造函数。我会收到此错误:获取未捕获错误:无法解析HomeComponent的所有参数

我不再有任何想法,因此任何建议都非常感激。谢谢!

答案

获取未捕获错误:无法解析HomeComponent的所有参数

首先,您的dataSource未在ngModule中注册为injectable。因此无法将其注入HomeComponent中的构造函数。我也不认为你想这样做,因为ngMaterial-dataSources是有状态的,注射剂不应该是有状态的。

在声明之前使用的类'UserDataSource'

您的dataSource不是组件模板中的ViewChild。它只是一个对象(没有html模板)。您得到的错误是在编译/转换时间处理typeScript中的注释。但UserDataSource类在HomeComponent下面声明。您在宣布之前使用它。您可以将它放在HomeComponent之上,但最好将它放在一个新文件中并导入它。但那不是解决方案。

可能解决方案

我不明白为什么你不能只调用radioFilter方法。它是UserDataSource的公共方法,HomeComponent中有一个名为dataSource的实例化对象。只是确保不要在构造函数中调用它。在调用构造函数之后处理成员变量。但是imho你可以打电话给dataSource.radioFilter()

以上是关于如何从Angular 6中的另一个类调用类中的函数?的主要内容,如果未能解决你的问题,请参考以下文章

如何从Angular中的另一个函数调用一个函数?

如何从Angular中的另一个组件调用组件的ngOnit函数

我想从同一个 dart.file 中的另一个类中调用基于函数的小部件中的值到 Text 小部件中

如何在Angular中的组件中调用服务类中的函数

从同一个类中的另一个方法调用 main 方法

如何从同一类中的另一个方法检索最后插入的 id?