如何将这两个 angular 元素分解为一个条件 angular 模板

Question

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

<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* 来渲染只对图像或文本需要的部分。

我也 google 没有成功。

Answer 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.*]

如何将这两个 angular 元素分解为一个条件 angular 模板

how to factor these two angular elements into a single conditional angular template

angular2-template

angular