如何将这两个角度元素分解为单个条件角度模板答案

【问题标题】：how to factor these two angular elements into a single conditional angular template如何将这两个角度元素分解为单个条件角度模板
【发布时间】：2021-09-16 14:08:37
【问题描述】：

我目前正在使用以下角度模板显示图像层或文本层

<div *ngFor="let layer of getLayers()">
    <img *ngIf="(layer.type === layerType.Image)"
        id={{layer.id}}
        class="floatLayer" cdkDrag
        (cdkDragStarted)="layerDragStarted($event)"
        (cdkDragEnded)="layerDragEnded($event)"
        (click)="selectLayerByClick(layer)"
        [src]="(layer | castTo: imageLayer).img_src" 
        [style.left]="layer.getLeftPx()"
        [style.top]="layer.getTopPx()"
        [style.z-index]="layer.getZindex()"
        [style.transform]="layer.getTransform()"
        [style.outline]="(layer.selected) ? 'dashed 1px red':''"
    />
    <div *ngIf="(layer.type === layerType.Text)" 
        id={{layer.id}}
        class = "floatLayer" cdkDrag
        (cdkDragStarted)="layerDragStarted($event)"
        (cdkDragEnded)="layerDragEnded($event)"
        (click)="selectLayerByClick(layer)"
        [style.left]="layer.getLeftPx()"
        [style.top]="layer.getTopPx()"
        [style.transform]="layer.getTransform()"
        [style.z-index]="layer.getZindex()"
        [style.outline]="(layer.selected) ? 'dashed 1px red':''"
    >
        <span style="white-space: nowrap;">
            {{(layer | castTo: textLayer).text}}
        </span>
    </div>
</div>

正如你所看到的，它们之间的一些区别是图像的来源[src] 而另一个包含带有图层文本的<span>。

ImageLayer 和 TextLayer 都继承自 BaseLayer

有没有一种方法可以创建可以渲染两种类型的层的单个元素，而无需重复所有这些 [style.*] 和事件连接以及如何做到这一点。

我尝试过的事情

我尝试使用*ngIf* 来渲染仅用于图像或仅文本的部分。

我也用谷歌搜索，但没有成功。

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

这是我的解决方案

<div 
    id={{layer.id}}
    class = "floatLayer" cdkDrag
    (cdkDragStarted)="layerDragStarted($event)"
    (cdkDragEnded)="layerDragEnded($event)"
    (click)="selectLayerByClick(layer)"
    [style.left]="layer.getLeftPx()"
    [style.top]="layer.getTopPx()"
    [style.transform]="layer.getTransform()"
    [style.z-index]="layer.getZindex()"
    [style.outline]="(layer.selected) ? 'dashed 1px red':''"
    [cdkDragDisabled]="!(layer.selected)"
>
    <span *ngIf="(layer.type === layerType.Text)" style="white-space: nowrap;">
        {{(layer | castTo: textLayer).text}}
    </span>
    <img *ngIf="(layer.type === layerType.Image)" [src]="(layer | castTo: imageLayer).img_src" >
</div>

我也可以使用[ngStyle] 来分解所有那些[style.*]

【讨论】：