【Angular】模块化、组件间通讯

版权声明：听说这里是写版权的，那转载就请注明下吧 https://blog.csdn.net/qq_32688731/article/details/82664351

父组件 Html代码：

<app-bpm-table #comTable [dataSource]="dataSource" [dataStyle]="dataStyle" 
(delete)="delete($event, Id)" (edit)="edit($event, editEntity)"></app-bpm-table>

父组件 TypeScript代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { BpmTableComponent } from '../../../components/bpm-table/bpm-table.component';

@Component({
  selector: 'app-wbs',
  templateUrl: './wbs.component.html',
  styleUrls: ['./wbs.component.css']
})
export class WbsComponent implements OnInit {

  constructor() { }
  dataStyle = {
    tableName: 'WBS Table Info',
    enableAction: true,
    enableAdd: true,
    enableDelete: true,
    enableEdit: true,
    tableHeads: [
      { ColumnName: 'No', ColumnType: 'number', ColumnSource: 'No', IsReadOnly: true },
      { ColumnName: 'WBS Code', ColumnType: 'text', ColumnSource: 'WBSCode', IsReadOnly: false },
      { ColumnName: 'WBS Name', ColumnType: 'text', ColumnSource: 'WBSName', IsReadOnly: false },
      { ColumnName: 'Create Date', ColumnType: 'datetime', ColumnSource: 'CreateDate', IsReadOnly: true },
    ]
  };

  dataSource = {
    ResultList: [
      { No: 1, PONo: 123, WBSCode: '123123', WBSName: 'WBSName123', CreateDate: '2018/1/1 12:22' },
    ],
    ResultListCount: 1
  }
  @ViewChild('comTable')
  comTable: BpmTableComponent;


  ngOnInit() {
  }
  delete(Id) {
    console.log(Id + "-----");
  }

  edit(editEntity) {
    console.log(editEntity);
  }
  test() {
    this.dataSource.ResultList.push({
      No: 2, PONo: 123, WBSCode: '123123', WBSName: 'WBSName123', CreateDate: '2018/1/1 12:22',
    });
    this.dataSource.ResultListCount++;
    this.comTable.loadData(this.dataSource)
  }
}

子组件 Html代码：

<nz-card [nzTitle]='dataStyle.tableName' [nzExtra]='addTemplate'>
  <nz-table #edit nzBordered [(nzData)]='dataSet' nzPageSize='5' [nzPageSizeOptions]='pageSizeOptions' [nzLoading]='isPOLoading'
    [nzShowTotal]='totalTemplate' [nzShowSizeChanger]='true'>
    <thead>
      <tr>
        <th *ngFor="let item of dataStyle.tableHeads">
          {{item.ColumnName}}
        </th>
        <th *ngIf='dataStyle.enableAction==true'>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let data of edit.data'>
        <td *ngFor="let item of dataStyle.tableHeads;index as key">
          <div *ngIf="item.IsReadOnly==false">
            <ng-container *ngIf='!editCache[data.ID].edit'>
              {{editCache[data.ID].data[item.ColumnSource]}}
            </ng-container>
            <ng-container *ngIf='editCache[data.ID].edit'>
              <input type='text' *ngIf="item.ColumnType=='text'" nz-input [(ngModel)]='editCache[data.ID].data[item.ColumnSource]'>
              <nz-date-picker nzShowTime *ngIf="item.ColumnType=='datetime'" [(ngModel)]='editCache[data.ID].data[item.ColumnSource]'></nz-date-picker>
              <nz-input-number *ngIf="item.ColumnType=='number'" [(ngModel)]='editCache[data.ID].data[item.ColumnSource]'></nz-input-number>
            </ng-container>
          </div>
          <div *ngIf="item.IsReadOnly==true">
            {{editCache[data.ID].data[item.ColumnSource]}}
          </div>
        </td>
        <td *ngIf='dataStyle.enableAction==true'>
          <div class='editable-row-operations'>
            <ng-container *ngIf='!editCache[data.ID].edit && dataStyle.enableEdit==true'>
              <a (click)='startEdit(data.ID)'>Edit</a>
            </ng-container>
            <ng-container *ngIf='editCache[data.ID].edit'>
              <a (click)='_saveEdit(data.ID)'>Save</a>
              <nz-divider nzType='vertical'></nz-divider>
              <nz-popconfirm [nzTitle]="'Sure to cancel?'" (nzOnConfirm)="cancelEdit(data.ID)">
                <a nz-popconfirm>Cancel</a>
              </nz-popconfirm>
            </ng-container>
            <nz-divider nzType='vertical' *ngIf="dataStyle.enableDelete==true && dataStyle.enableEdit==true"></nz-divider>
            <a nz-popconfirm nzTitle='Sure delete this data?' *ngIf='dataStyle.enableDelete==true' (nzOnConfirm)='_delete(data.ID)'>Delete</a>
          </div>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-card>
<ng-template #totalTemplate>
  Total {{dataSource.ResultListCount}} items
</ng-template>
<ng-template #addTemplate>
  <a (click)='isVisible=(!isVisible)' *ngIf='dataStyle.enableAdd==true'>Add</a>
</ng-template>
<nz-modal [(nzVisible)]='isVisible' nzTitle='Add PO Info' (nzOnCancel)='isVisible=(!isVisible)' nzCancelText='Cencel'
  nzOkText='Add' (nzOnOk)='handleOk()'>
  <p>表单数据</p>
</nz-modal>

子组件 TypeScript代码：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-bpm-table',
  templateUrl: './bpm-table.component.html',
  styleUrls: ['./bpm-table.component.css']
})
export class BpmTableComponent implements OnInit {

  @Input() dataSource: any;
  @Input() dataStyle: any;
  @Output() delete = new EventEmitter<number>();
  @Output() edit = new EventEmitter<any>();

  constructor() { }

  dataSet = [];
  editCache = [];
  isLoading = false;
  editTemp: any;

  ngOnInit() {
    this.loadData(this.dataSource);
  }

  startEdit(Id: number): void {
    this.editTemp = JSON.parse(JSON.stringify(this.editCache[Id]));
    this.editCache[Id].edit = true;
  }
  _saveEdit(Id: number): void {
    const index = this.dataSet.findIndex(item => item.Id === Id);
    this.dataSet[index] = this.editCache[Id].data;
    this.editCache[Id].edit = false;
    this.edit.emit(this.dataSet[index]);
  }
  cancelEdit(Id: number): void {
    this.editCache[Id].data = this.editTemp['data'];
    this.editCache[Id].edit = false;
  }
  _delete(Id: number): void {
    this.delete.emit(Id);
    console.log(Id + 'delete');
  }
  arr = [];
  loadData(dataSource: any) {
    this.dataSet = [];
    this.editCache = [];
    dataSource['ResultList'].forEach(item => {
      this.dataSet.push(item);
      this.editCache[item.ID] = {
        edit: false,
        data: item
      };
    });
  }
}

里面主要涉及到组件间方法的调用，事件的传递，当然一个模块化的table,只需配置下显示列是主要功能！