1

我正在尝试创建一个包装器模板，该模板将包含基于特定条件的特定属性值对。附加属性值对将是我能想到的最优雅的解决方案......

<ng-template #wrapper let-size="size">
    <custom-component {if size === 'XL', [xlInput]="someVal"}
                      {if size === 'L', [lInput]="otherVal"}
                      {if size === 'M', class="medium"}
                      etc... >
    </custom-component>
</ng-template>

类似于上面的伪代码。

我已经探索了使用 [attr.directive-name]="condition ? someVal : null" 方法有条件地应用指令，但这对于处理我的所有用例来说并不可靠。

有关更多信息，我正在使用 primeNG 的 p-table。我的包装模板是根据输入条件生成特定类型的表（即条件 1 创建一个行可选择的表，条件 2 创建一个不可选择的表等）。

我希望有一些类似于下面的伪代码的解决方案。

<ng-template #table let-tableType="tableType"
    <p-table class="myTable" dataKey="var1" [columns]="var2" [value]="var3"
             {if tableType === 'selectable': [(selection)]="var4"}
             {if tableType === 'selectable': (onRowSelect)="someFunc()"}
             {if tableType === 'selectable': (onRowUnselect)="someOtherFunc()"}
             {if tableType === 'selectable': (onHeaderCheckboxToggle)="anotherFunc()"}>
        <ng-content></ng-content>
    </p-table>
</ng-template>
4

1 回答 1

0

如果差异很大，您可以尝试为您的用例制作几个不同的组件。并使用*ngIf或*ngSwitch结构指令来选择要使用的正确大小写。不要全部使用一个组件，如果您有很多用例，它将变得巨大且失控。

于 2018-08-06T19:49:47.323 回答