angular 组件传值 父子组件引用
作者：互联网
```C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\pages\statistics\warehouse-statistics\man-performance\unpackage-statistics\unpackage-statistics.component.html姓名数量{{item.userName}}{{item.totalCount}}C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\pages\statistics\warehouse-statistics\man-performance\unpackage-statistics\unpackage-statistics.component.ts
import { Component, OnInit,} from '@angular/core';
import { PackageDeliverService } from "../../package-deliver/packageDeliver.service";
import { publicMethod } from "../../../../../shared/publicFunction/publicFunction";
import { AuthorityComponent } from "../../../../../shared/component/authority.component";
import { ActivatedRoute, Router } from "@angular/router";
import { StockService } from "../../../../storage/quantity-in-stock/stock.service";
import { environment } from "../../../../../../environments/environment";
import {PurchaseOrder1688Service} from "../../../../purchase/components/purchase-1688/purchase-1688.service"
@Component({
selector: 'app-unpackage-statistics',
templateUrl: './unpackage-statistics.component.html',
styleUrls: ['../../../orderStatistics/order-head/order-head.component.scss', '../../../public.scss', './unpackage-statistics.component.scss'],
providers: [PackageDeliverService, StockService,PurchaseOrder1688Service]
})
export class UnpackageStatisticsComponent extends AuthorityComponent implements OnInit {
people: Array= [];
startTime: string;
endTime: string;
nameObject = { title: '拆包绩效统计', yName: 'Value', bottomName: '拆包数量' }
chartName: string = '图表'
params = {}
urlPre: string;
selectedwarehouse = 1;
selectedpeople
selecteddeliverTime = 1;
toggle: boolean = true;
PageInfo = { pageSize: 5, pageIndex: 1, totalCount: 2 };
tableinfo = [];
warehouse: Array= [];
constructor(
private packageDeliverService: PackageDeliverService,
public activerouter: ActivatedRoute,
public router: Router,
private StockService: StockService,
public purchaseOrder1688Service:PurchaseOrder1688Service,) {
super(activerouter, router);
this.tableinfo = this.packageDeliverService.tableData;
}
ngOnInit() {
this.urlPre = `${environment.api_url}/api/v1/purchasestatistics/WarehousePackageExport`
this.loadpeople();
this.loadWarehouse();
this.onQuery();
}
loadWarehouse() {
this.purchaseOrder1688Service.GetStorageData().subscribe(data => {
this.warehouse = [];
data.content.forEach(e => {
this.warehouse.push({ id: e.warehouseId, text: e.name })
})
});
}
selectedChangeWarehouse(n: number) {
this.selectedwarehouse = n;
this.onQuery();
}
toggleBar(val: boolean) {
this.toggle = val
}
topage(n: number) {
this.onQuery(n)
}
tolast(n: number) {
this.onQuery(n)
}
pageSizeDate(n: number) {
this.tableinfo['pageSize'] = n
this.onQuery()
}
pageChanged(pn: number) {
$('html, body').animate({ scrollTop: 0 }, 0);
this.onQuery(pn);
}
selectChangedDeliverTime(n: number) {
this.selecteddeliverTime = n;
if (n !== 5) {
this.onQuery();
}
}
onParams() {
return {
warehouseId: this.selectedwarehouse,
timeSpan: this.selecteddeliverTime,
userId: this.selectedpeople,
PageIndex: 0,
pageSize: this.PageInfo.pageSize,
startTime: this.startTime,
endTime: this.endTime,
}
}
userSetTimeQuery(obj: Object) {
this.startTime = obj['beginTime']
this.endTime = obj['endTime']
this.onQuery();
}
loadpeople() {
this.packageDeliverService.GetStorageData().subscribe(data => {
this.people = [{ id: -1, text: '全部' }];
for (let i = 0; i < data.content.length; i++) {
let temps = { id: data.content[i].id, text: data.content[i].userName }
this.people.push(temps);
}
});
}
onQuery(pageNumber: number = 1) {
const param = this.onParams()
param['PageIndex'] = pageNumber - 1
// 传递给子组件的导出字段
this.params = this.onParams();
this.params['PageIndex'] = this.PageInfo.pageIndex
this.packageDeliverService.getUnpackList(param).subscribe(data => {
this.tableinfo = data.content.items;
this.PageInfo = data.content.pageInfo
this.PageInfo.pageIndex++;
publicMethod.drawColumnChart(this.nameObject, this.tableinfo, 'unpackageColumncontainer')
}, this.handleError);
}
selectedChangepeople(obj: Object) {
this.selectedpeople = Number(obj['value']);
if(this.selectedpeople==-1){
this.selectedpeople=undefined;
}
this.onQuery();
}
}
C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\pages\statistics\warehouse-statistics\component\warehouse-head\warehouse-head.component.ts
import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
@Component({
selector: 'app-warehouse-head',
templateUrl: './warehouse-head.component.html',
styleUrls: ['../../../orderStatistics/order-head/order-head.component.scss', './warehouse-head.component.scss']
})
export class WarehouseHeadComponent implements OnInit {
@Input() warehouse: Array= [];
// warehouse:Array= [{id:1,text:"东莞仓库"},{id:2,text:"FBA仓库"}]
@Input() people: Array= []
@Input() timeLableName: string;
@Input() isWarehouse?: boolean = true;
deliverTime: Array= [{ id: 1, text: '今天' }, { id: 2, text: '昨天' }, { id: 3, text: '7天内' }, { id: 4, text: '30天内' }, { id: 5, text: '自定义' }];
selecteddeliverTime: number = 1;
selectedwarehouse: number = 1
@Input() clickbottom?: number = 0;
@Input() isShowToggle?: boolean = true;
warehouseTitle: string = '仓库'
timeTitle: string = '时间筛选'
customize: boolean = false;
timeTextTitle: string = '时间内容筛选'
selectedTimeText: number = 5;
timeText: Array= [{ id: 1, text: '创建时间' },
{ id: 2, text: '付款时间' },
{ id: 3, text: '配货时间' },
{ id: 4, text: '分拣时间' },
{ id: 5, text: '发货时间' },]
@Output() onSelectedChangeWarehouse = new EventEmitter()
@Output() onSelectChangedDeliverTime = new EventEmitter()
@Output() onChangeTimeText = new EventEmitter()
@Output() onChoosePeople = new EventEmitter()
@Output() OnUserSetTimeQuery = new EventEmitter()
constructor() { }
ngOnInit() {
if (this.timeLableName && this.timeLableName.length > 0) {
this.timeTitle = this.timeLableName;
}
}
changeTime(n: number): void {
this.selecteddeliverTime = n;
n === 5 ? this.customize = true : this.customize = false;
this.onSelectChangedDeliverTime.emit(n)
}
doTimeSearch(obj: Object): void {
this.OnUserSetTimeQuery.emit(obj)
}
selectedChangeWarehouse(n: number): void {
this.selectedwarehouse = n
this.onSelectedChangeWarehouse.emit(n)
}
changeTimeText(n:number):void {
this.selectedTimeText = n;
this.onChangeTimeText.emit(n)
}
choosePeople(obj: Object): void {
this.onChoosePeople.emit(obj)
}
//高级筛选按钮
toggle1(n: number): void {
this.clickbottom = n;
}
}
C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\pages\statistics\warehouse-statistics\component\warehouse-head\warehouse-head.component.html
-->
-->员工筛选：
C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\shared\publicComponent\on-head-component\on-head-component.component.ts
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core';
@Component({
selector: 'app-on-head-component',
templateUrl: './on-head-component.component.html',
styleUrls: ['./on-head-component.component.scss',]
})
export class OnHeadComponentComponent implements OnInit {
constructor() { }
@Input() headTitle: string
@Input() selectText: string | number
@Input() headText: Array@Output() onChangeHeadText = new EventEmitter()
ngOnInit() { }
changeHeadText(n: number | string ): void {
this.onChangeHeadText.emit(n)
}
}
C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\shared\publicComponent\on-head-component\on-head-component.component.spec.ts
/* tslint:disable:no-unused-variable */
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { OnHeadComponentComponent } from './on-head-component.component';
describe('OnHeadComponentComponent', () => {
let component: OnHeadComponentComponent;
let fixture: ComponentFixture;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ OnHeadComponentComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OnHeadComponentComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
C:\Project\svnerp\svn\Dmterp\3.apps\erp\5.apps\WebUi\src\app\shared\publicComponent\on-head-component\on-head-component.component.html{{headTitle}}：
{{item.text}}
标签：head,..,text,component,number,warehouse,组件,angular,传值 来源： https://blog.51cto.com/u_15187242/2749456