angular - 从另一个文件引用 Angular/Ionic 组件而不为其添加指令

Question

我在 field.html 中有以下 Angular/Ionic 组件:

<ng-template #mainField let-uiComponent>
    <ion-label position="stacked">{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>
        <ion-input  *ngSwitchCase="'NUMBER'" type="number" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-input>

        <ion-datetime *ngSwitchCase="'DATE'" display-format="MMM DD, YYYY" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-datetime>
    </ng-container>
</ng-template>

<ng-template #checkboxField let-uiComponent>
    <ion-item>
        <ion-label>{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
        <ion-checkbox checked="{{fieldValue}}" value="uiComponent.getAttribute('FIELD_NAME')" slot="start"></ion-checkbox>
    </ion-item>
</ng-template>

<ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>

    <ng-container *ngSwitchCase="'CHECKBOX'" >
        <ng-container  *ngTemplateOutlet="checkboxField; context:{ $implicit: uiComponent }"></ng-container>
    </ng-container>


    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="mainField; context:{ $implicit: uiComponent }">
        </ng-container> 
    </ng-container>

</ng-container> 

在这个组件中我们有多个模板来根据某种类型绘制一个字段。该组件工作正常，但是当我们添加很多字段类型(比如说 15 种类型)时，代码变得难以跟踪。因此，我们决定将每个字段类型分离到一个专用文件中，并创建了以下组件 checkbox.html:

<ion-item>
    <ion-label>{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ion-checkbox checked="{{fieldValue}}" value="uiComponent.getAttribute('FIELD_NAME')" slot="start"></ion-checkbox>
</ion-item>

并将我们的字段组件更新如下:

<ng-template #mainField let-uiComponent>
    <ion-label position="stacked">{{uiComponent.getAttribute("DISPLAY_NAME")}}</ion-label>
    <ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>
        <ion-input  *ngSwitchCase="'NUMBER'" type="number" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-input>

        <ion-datetime *ngSwitchCase="'DATE'" display-format="MMM DD, YYYY" value='{{uiComponent.getAttribute("FIELD_DISPLAY_VALUE")}}' ></ion-datetime>
    </ng-container>
</ng-template>

<ng-container [ngSwitch]='uiComponent.getAttribute("FIELD_TYPE")'>

    <ng-container *ngSwitchCase="'CHECKBOX'" >
            <field-checkbox [uiComponent]="uiComponent"></field-checkbox>
    </ng-container>


    <ng-container *ngSwitchDefault>
        <ng-container *ngTemplateOutlet="mainField; context:{ $implicit: uiComponent }">
        </ng-container> 
    </ng-container>

</ng-container>

在那之后我们注意到一个额外的 HTML 元素 field-checkbox 被添加到 UI 中，在下面的屏幕截图中看到它突出显示:

我们如何重构代码以分离不同的 UI 组件，但又不将此元素添加到 UI 中？这很重要，因为在将额外元素添加到 UI 时它会破坏一些 CSS。

Answer 1

这可能是不可能的，因为将一个组件分解成几个小组件肯定会添加一个新标签。在您的示例中:field-checkbox。

我认为您需要解决 css 样式问题，以免它中断。例如在您的 CSS 规则中定位任何子元素而不是直接后代。