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个中使用此进度组件，而不能在其他组件中使用，并且由于im在所有3个组件中都使用了表组件html，我如何告诉表组件不显示进度栏而不使用ngIf？

如果我不能很好地解释或做错了事，请提前抱歉。

Answer 1

您可以将进度条用作输入组件，并从所需的组件进行渲染

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

这样，您无需在模板中声明组件，就可以从控制器实例化进度条

Answer 2

如果进度条必须是表组件的一部分，则您将需要对子组件进行某种输入才能添加或删除进度条。您正在做的事情是正确的，我不认为它会失去它的含义，只会使您的子组件更具活力。

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

@Input() showPorgressBar?: boolean;

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

使用@Input时，某些组件是否可以查看元素而有些则看不到？

2 个答案: