组件内标签跳转

Question

1，点击Query按钮，从查询页面到查询结果页面
2，

3，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>