angular4同一组件中各个标签里的功能实现

Question

1，angular4同一组件中各个标签里的功能实现
2，需求如下图
下面两张图里的 Line Mode可以省略


3，
3.1组件

export interface LineData {
operation: string;
LINE: String;
USID: String;
TRDT: String;
SFCLINE: String;
LINEMODE: Number;
ACOSTATUS: Number;
LINEGROUP: String;
}
@Component({
selector: 'app-sctbline001',
templateUrl: './sctbline001.component.html',
styleUrls: ['./sctbline001.component.css']
})

export class Sctbline001Component implements OnInit {
routeLinks:any[];
constructor(

public dialog:MdDialog,
private router: Router,
private sctacommonService :SctacommonService  
) { 
  this.routeLinks=[
    {label:'Search',link:'/common.search'},
    {label:'Relsult',link:'/common.searchResult'},
    {label:'Infomation',link:'/common.sysInfo'}
  ];
}

displayedColumns = ['operation','LINE', 'USID', 'TRDT', 'SFCLINE', 'LINEMODE', 'ACOSTATUS', 'LINEGROUP'];
fakeDB = new FakeDB();

dataSource: ngCDKDataSource | null;

searchItem(item) {

this.router.navigate(['/common.searchResult'])

}

addItem() {

let dialogRef = this.dialog.open(DialogComponent, {
  width: '500px',
});

dialogRef.afterClosed().subscribe(result => {
});

};

editItem(item) {

let editlogRef = this.dialog.open(EditlogComponent, {
  width: '500px',
});

editlogRef.afterClosed().subscribe(result => {
});

};

deleteItem(item) {

};

@ViewChild(MdPaginator) paginator: MdPaginator;

ngOnInit() {

this.dataSource = new ngCDKDataSource(this.fakeDB, this.paginator);
console.log(this.sctacommonService.getLines());

}
}

export class FakeDB {
/* Stream that emits whenever the data has been modified. /
dataChange: BehaviorSubject<LineData[]> = new BehaviorSubject<LineData[]>([]);
get data(): LineData[] { return this.dataChange.value; }

constructor() {

// Fill up the database with 100 users.
for (let i = 0; i < 50; i++) { this.addFakeRecord(); }

}

/* Adds a new user to the database. /
addFakeRecord() {

const copiedData = this.data.slice();
copiedData.push(this.createFakeRecord());
this.dataChange.next(copiedData);

}

/* Builds and returns a new User. /
private createFakeRecord() {

return {
  operation:'',
  LINE: '3.231',
  USID: '',
  TRDT: ''+(new Date().getFullYear()+'/'+
  (new Date().getMonth() + 1) + '/' + new Date().getDate()+'T'+
  new Date().getHours()+':'+new Date().getMinutes()+':'+new Date().getSeconds()),
  SFCLINE: ''+'454',
  LINEMODE: 0,
  ACOSTATUS:1,
  LINEGROUP: 'weerj'

}
}
}
export class ngCDKDataSource extends DataSource<any> {
constructor(private _exampleDatabase: FakeDB, private _paginator: MdPaginator) {

super();

}

/* Connect function called by the table to retrieve one stream containing the data to render. /
connect(): Observable<LineData[]> {

const displayDataChanges = [
  this._exampleDatabase.dataChange,
  this._paginator.page,
];

return Observable.merge(...displayDataChanges).map(() => {
  const data = this._exampleDatabase.data.slice();

  // Grab the page's slice of data.
  const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
  return data.splice(startIndex, this._paginator.pageSize);
});

}

disconnect() { }
}
HTML
<md-tab-group class="body-tab">
<md-tab label="{{'common.search' | translate}}">

<div class="search-block">
  <div class="input-container">
    <md-form-field>
      <input mdInput placeholder="{{'sctbline001.LINE' | translate}}">
    </md-form-field>
    <md-form-field>
      <input mdInput placeholder="{{'sctbline001.SFCLINE' | translate}}">
    </md-form-field>
    <md-form-field>
      <input mdInput placeholder="{{'sctbline001.LINEGROUP' | translate}}">
    </md-form-field>
    <button md-raised-button class="table-button" (click)="searchItem('item 1')">{{'common.search' | translate}}</button>
  </div>
</div>

</md-tab>

<md-tab label="{{'common.searchResult' | translate}}">

<div class="full-screen full-table md-elevation-z8">
  <button md-mini-fab class="table-button-fab" (click)="addItem()"> + </button>
  <md-table #table [dataSource]="dataSource">
    <ng-container mdColumnDef="operation">
      <md-header-cell *mdHeaderCellDef>Item</md-header-cell>
      <md-cell *mdCellDef="let row">
        <div class="operator-container">
          <button md-icon-button class="operator-button ic-edit" (click)="editItem(row.LINE)"></button>
          <button md-icon-button class="operator-button ic-delete" (click)="deleteItem(row.LINE)"></button>
        </div>
      </md-cell>
    </ng-container>
    <ng-container mdColumnDef="LINE">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.LINE' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.LINE}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="USID">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.USID' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.USID}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="TRDT">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.TRDT' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.TRDT}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="SFCLINE">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.SFCLINE' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.SFCLINE}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="LINEMODE">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.LINEMODE' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.LINEMODE}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="ACOSTATUS">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.ACOSTATUS' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.ACOSTATUS}} </md-cell>
    </ng-container>
    <ng-container mdColumnDef="LINEGROUP">
      <md-header-cell *mdHeaderCellDef> {{'sctbline001.LINEGROUP' | translate}} </md-header-cell>
      <md-cell *mdCellDef="let row"> {{row.LINEGROUP}} </md-cell>
    </ng-container>
    <md-header-row *mdHeaderRowDef="displayedColumns"></md-header-row>
    <md-row *mdRowDef="let row; columns: displayedColumns;"></md-row>
  </md-table>
  <md-paginator #paginator [length]="fakeDB.data.length" [pageIndex]="0" [pageSize]="5"></md-paginator>
</div>

</md-tab>

<md-tab label="{{'common.sysInfo' | translate}}">

<form class="half-screen half-table mat-elevation-z8 ">
 <tr>
  <td>Application ID:</td>
  <td> SMBASE001</td>
</tr>

<tr>
  <td>Application Version:</td>
  <td>2.0.1.0</td>
</tr>

<tr>
  <td rowspan="4">User Permission:</td>
  <td>1.View</td>
</tr>
<tr>
  <td>2.Edit</td>
</tr>
<tr>
  <td>4.Add</td>
</tr>
<tr>
  <td>8.Delete</td>
</tr>
    </form>

</md-tab>
</md-tab-group>
3，2编辑功能
export class EditData {
constructor(public LINE: string,public SFCLINE: String,public LINEGROUP: String){

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

constructor(public editlogRef: MdDialogRef<EditlogComponent>,@Inject(MD_DIALOG_DATA) public data: any) { }

onNoClick(): void {
  this.editlogRef.close();
}
displayedColumns = ['SFCLINE', 'LINEGROUP'];

dataSource: diaDataSource | null;
datas=[];
iscolor:boolean = false;
arrays=[];
dia : EditData = new EditData(null,null,null);
fakeDB :FakeDB = new FakeDB(this.arrays);
uid:number;

oncli(val,ev){
  this.uid = val;
  console.log("cliuid = ",this.uid);
  this.datas.forEach(v=> {
    if(v.LINE === val){
      this.iscolor = true;
    }
  })
}
ngOnInit() {
  console.log("db",this.fakeDB);
  this.dataSource = new diaDataSource(this.fakeDB);
  this.datas = this.fakeDB.dataChange.value;
  }
 

}

export class FakeDB {

dataChange: BehaviorSubject<EditData[]> = new BehaviorSubject<EditData[]>([]);
get data(): EditData[] { return this.dataChange.value; }
constructor(arr) {
  for(let i=0;i<arr.length;i++){   
    for(let j=0;j<arr[i].length;j++){
      this.editFakeRecord(arr[i][j]);
    }
  }
}

editFakeRecord(DiaData) {

  var copiedData = this.data;
  this.dataChange.next(copiedData);
}

}

export class diaDataSource extends DataSource<any> {

constructor(private _exampleDatabase: FakeDB) {
  super();
}

connect(): Observable<EditData[]> {
  const displayDataChanges = [
     this._exampleDatabase.dataChange,
  ];

  return Observable.merge(...displayDataChanges).map(() => {
    return this._exampleDatabase.data.slice().filter((item: EditData) => {
      return item;
    });
  });
}
disconnect() { }

}

HTML
<form class="center-radio-group ">

 <md-form-field>
      <input readonly="readonly"  mdInput placeholder="{{'sctbline001.LINE' | translate}}">
    </md-form-field>
   <md-form-field>
      <input mdInput placeholder="{{'sctbline001.SFCLINE' | translate}}">
    </md-form-field>
    <md-form-field>
      <input mdInput placeholder="{{'sctbline001.LINEGROUP' | translate}}">
    </md-form-field>
    </form>

    <div class="button-css">
          <button md-button tabindex="2 ">save</button>
          <button md-button (click)="onNoClick() " tabindex="-1 ">cancel</button>
   </div>