如何从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中的另一个组件调用组件的ngOnit函数