Question

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

<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表。我的包装器模板将根据输入条件生成特定类型的表（即条件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>

Answer 1

如果差异很大，可以尝试为用例制作几个不同的组件。并使用*ngIf或*ngSwitch结构化指令选择合适的大小写。不要对它们全部使用一个组件，如果您有很多用例，它将变得庞大而无法控制。

有没有一种方法可以有条件地将属性值对添加到Angular2 +中的元素声明？

1 个答案: