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}}