有没有办法让某些组件在使用@Input 时看到一个元素而有些却看不到？

Question

我有这个表格组件，这是它的 HTML。

<p-table 
#dt class="withHighlight" 
[columns]="jobCols" 
[value]="jobList" 
dataKey="id" 
selectionMode="single"
[paginator]="jobList.length > 10" 
[rows]="5"
editMode="row">
<ng-template pTemplate="caption">
   <div style="text-align: left">
      <i class="fa fa-search" style="margin:4px 4px 0 0"></i>
      <input type="text" pInputText size="30" (input)="dt.filterGlobal($event.target.value, 'contains')">
   </div>
</ng-template>
<ng-template pTemplate="header" let-columns>
   <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
      {{col.header}}
      <p-sortIcon [field]="col.field" ariaLabel="Activate to sort"
         ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order">
      </p-sortIcon>
      </th>
      <!-- <th *ngIf="isReport">Progress bar</th> -->
      <th style="width:7em">Actions</th>
   </tr>
</ng-template>
<ng-template pTemplate="emptymessage" let-columns>
   <tr>
      <td>No data found.</td>
      <td *ngFor="let col of columns"></td>
   </tr>
</ng-template>
<td>
   {{rowData.configuration_title}}
</td>
<td>
   <app-progress-bar [progressBarOptions]="progressBarOptions">
   </app-progress-bar>
</td>
</tr>
</ng-template>
</p-table>

在这个表格组件中，我制作了一个名为 app-progress-bar 的小型共享组件，表格组件本身就是一个共享组件，目前正在被其他 3 个组件使用，如下所示：

<app-table 
[jobTitle]="jobTitle"
[objectTitle]="objectTitle"
[jobList]="loadJobResponseModel" 
[objectList]="loadJobObjects"
[objectCols]="objectCols"
[jobCols]="jobCols"
[progressBarOptions]="progressBarOptions"
>
</app-table>

我尝试过像这样使用 *ngIf 进行此操作：

<td *ngIf="showProgressBar">
   <app-progress-bar [progressBarOptions]="progressBarOptions">
   </app-progress-bar>
</td>

它可以工作，但我觉得如果我将 *ngIf 放入其中，我的共享组件就失去了意义。

我想仅在这 3 个组件中的 1 个组件中使用此进度组件，但不在其他组件中使用，并且由于我在所有 3 个组件中都使用表格组件 html，我如何告诉表格组件不显示进度不使用 ngIf 吗？

如果我没有解释清楚或者我做错了什么，请提前道歉。

Answer 1

你可以使用你的进度条作为入口组件，并从你想要的组件中渲染它

https://angular.io/guide/entry-components

这样你不需要在你的模板中声明组件，你可以从你的控制器实例化进度条

Answer 2

如果进度条必须是表格组件的一部分，您将需要对子组件进行某种输入来添加或删除进度条。您所做的是正确的，我不认为它失去了意义，只是让您的子组件更具活力。

如果您不希望所有其他组件都发送 [showProgressBar]="false" 作为输入，您可以将输入设为可选。

@Input() showPorgressBar?: boolean;

现在，只有当您对进度条感兴趣时，您才需要发送 showPorgressBar 作为输入。