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



<div class="card card-block">
  <app-warehouse-head
    [warehouse]="warehouse"
    [people]="people"
    (onSelectedChangeWarehouse)="selectedChangeWarehouse($event)"
    (onSelectChangedDeliverTime)="selectChangedDeliverTime($event)"
    (onChoosePeople)="selectedChangepeople($event)"
    (OnUserSetTimeQuery)="userSetTimeQuery($event)">
  </app-warehouse-head>
  <app-toggle-btn-component
    [ChartName]="chartName"
    (onToggleBar)="toggleBar($event)">
  </app-toggle-btn-component>

  <div class="content-wrap">
    <div class="table-wrap" [ngClass]="{'none':!toggle}">
      <app-pagination-component
        isExport="true"
        [(PageInfo)]="PageInfo"
        [Params]="params"
        [UrlPre]="urlPre"
        (onPageChange)="pageChanged($event)"
        (onTopage)="topage($event)"
        (onTolast)="tolast($event)"
        (onPageSizeDate)="pageSizeDate($event)">
      </app-pagination-component>
      <table class="table table-hover table-bordered" id="table">
        <thead>
        <tr class="black-muted-bg">
          <th>姓名</th>
          <th >数量</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of tableinfo|paginate:
          { id: 'pager',
            itemsPerPage:PageInfo.pageSize,
            currentPage:PageInfo.pageIndex,
            totalItems:PageInfo.totalCount
          };let index = index">
          <td>{{item.userName}}</td>
          <td>{{item.totalCount}}</td>
        </tr>
        </tbody>
      </table>
      <app-pagination-component
        *ngIf="PageInfo.totalCount>20&&PageInfo.pageSize>20"
        [(PageInfo)]="PageInfo"
        [Params]="params"
        [UrlPre]="urlPre"
        (onPageChange)="pageChanged($event)"
        (onTopage)="topage($event)"
        (onTolast)="tolast($event)"
        (onPageSizeDate)="pageSizeDate($event)">
      </app-pagination-component>
    </div>
    <div class="lineChart-wrap" [ngClass]="{'none':toggle}">
      <div id="unpackageColumncontainer"></div>
    </div>
  </div>
</div>

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<any> = [];
  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<any> = [];

  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<any> = [];
  // warehouse:Array<any>= [{id:1,text:"东莞仓库"},{id:2,text:"FBA仓库"}]
  @Input() people: Array<any> = []
  @Input() timeLableName: string;
  @Input() isWarehouse?: boolean = true;
  deliverTime: Array<any> = [{ 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<any> = [{ id: 1, text: '创建时间' },
    { id: 2, text: '付款时间' },
    { id: 3, text: '配货时间' },
    { id: 4, text: '分拣时间' },
    { id: 5, text: '发货时间' },]
  @Output() onSelectedChangeWarehouse = new EventEmitter<number>()
  @Output() onSelectChangedDeliverTime = new EventEmitter<number>()
  @Output() onChangeTimeText = new EventEmitter<number>()
  @Output() onChoosePeople = new EventEmitter<Object>()
  @Output() OnUserSetTimeQuery = new EventEmitter<Object>()
  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


<div class="card card-block select-part">
  <app-on-head-component *ngIf="isWarehouse"
                         [headTitle]="warehouseTitle"
                         [selectText]="selectedwarehouse"
                         [headText]="warehouse"
                         (onChangeHeadText)="selectedChangeWarehouse($event)">
  </app-on-head-component>
<!--  <app-on-head-component *ngIf="!isWarehouse"-->
<!--                         [headTitle]="timeTextTitle"-->
<!--                         [selectText]="selectedTimeText"-->
<!--                         [headText]="timeText"-->
<!--                         (onChangeHeadText)="changeTimeText($event)">-->
<!--  </app-on-head-component>-->
  <div *ngIf="clickbottom==1">
    <app-time-select-component [timeTitle]="timeTitle"
                               [selecteTime]="selecteddeliverTime"
                               [timeText]="deliverTime"
                               [customize]="customize"
                               (onChangeTime)="changeTime($event)"
                               (onDoTimeSearch)="doTimeSearch($event)">
    </app-time-select-component>
    <div class="select">
      <div class="part-wrap">
        <span class="title">员工筛选：</span>
      </div>
      <div class="option-wrap"
           style="margin-top:-5px">
        <select2 [width]="395"
                 [data]="people"
                 (valueChanged)="choosePeople($event)">
        </select2>
      </div>
    </div>
  </div>
  <app-toggle-select-component *ngIf="isWarehouse && isShowToggle"
                               (selectToggle)="toggle1($event)">
  </app-toggle-select-component>
</div>



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<any>
  @Output() onChangeHeadText = new EventEmitter<any>()

  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<OnHeadComponentComponent>;

  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

<div class="select">
  <label class="part-wrap">
    <span class="title">{{headTitle}}：</span>
  </label>
  <div class="option-wrap">
    <span class="option"
      *ngFor="let item of headText"
      (click)="changeHeadText(item.id)"
      [ngClass]="{'tag':item.id==selectText}">
      {{item.text}}
    </span>
  </div>
</div>