Angular中子组件totalDealsForApproval大于0时父组件动态显示提示的实现

1 改造可复用表格组件（table-multi-sort.component） #

首先给子组件新增两个输入属性，分别控制提示的显隐和提示内容，支持父组件自定义传入：

修改table-multi-sort.component.ts #

export class TableMultiSortComponent implements OnInit, OnChanges {
  // 原有属性保留，新增以下两个输入属性
  @Input() showAlert: boolean = false;
  @Input() alertMessage: string = 'This deal was sent to approval and waiting for approval.';

  // 原有逻辑不变
}

修改table-multi-sort.component.html的提示区块 #

将硬编码的提示内容改为动态绑定，同时新增显隐判断：

<mat-card *ngIf="table !== undefined">
  <!-- 仅showAlert为true时才渲染提示区块 -->
  <div style="padding-top: 20px;" *ngIf="showAlert">
    <div class="alertInfo" >
      <mat-icon>info</mat-icon>{{alertMessage}}
    </div>
  </div>
  <!-- 原有表格逻辑不变 -->
</mat-card>

2 改造父组件（deals-approval.component） #

父组件直接把待审批数量和自定义提示内容传给子组件即可：

修改deals-approval.component.html的子组件调用 #

<div style="padding-bottom: 20px;">
  <div>
    <app-table-multi-sort 
      (dataServiceEvent)="dataForApprovalServiceEvent($event)" 
      [tableOptions]="tableOptions" 
      [tableData]="data"
      [showAlert]="totalDealsForApproval > 0"
      [alertMessage]="'当前有'+ totalDealsForApproval +'条待审批交易，请及时处理'"
    ></app-table-multi-sort>
  </div>
</div>

父组件原有TS逻辑不需要额外修改，你已经在接口回调里更新了totalDealsForApproval的值，Angular会自动同步到子组件的输入属性。

可选增强：支持自定义提示结构 #

如果需要在提示里放按钮、自定义样式等复杂内容，可以使用Angular内容投影实现：

1. 子组件提示区块修改为：

<div style="padding-top: 20px;" *ngIf="showAlert">
  <div class="alertInfo" >
    <mat-icon>info</mat-icon>
    <ng-content select="[alert-content]"></ng-content>
  </div>
</div>

2. 父组件调用时传入自定义内容：

<app-table-multi-sort 
  (dataServiceEvent)="dataForApprovalServiceEvent($event)" 
  [tableOptions]="tableOptions" 
  [tableData]="data"
  [showAlert]="totalDealsForApproval > 0"
>
  <div alert-content>
    您有{{totalDealsForApproval}}条待审批申请 <button mat-button (click)="batchApprove()">批量审批</button>
  </div>
</app-table-multi-sort>

内容的提问来源于stack exchange，提问作者Rajiv Kumar