Question

询问：第二种带有工具提示的标签。现有标签的工具提示向右冲洗；新的工具提示与标签的END靠左。

给定：现有标签广泛存在。我不希望更改任何工作中的。我希望只添加添加内容以使此 new 类型起作用。因此，即使有标记HTML的更好方法，我也不想回过头来触摸不需要的任何内容。

以下是带有默认类型的工具提示的标签（最右侧浮动）：

<div class="col-xs-12 col-sm-3">
    <app-label 
        labelText="My Default Label"
        tooltip="Tooltip is flush far right"
        bold="true">
    </app-label>
</div>

它调用此组件：

<app-tooltip [id]="id" [tooltip]="tooltip"></app-tooltip>
<b>
    <label>
        <span *ngIf="error" class="icon-error"></span>
        <span *ngIf="bold">
            <b>{{labelText}}</b>
        </span>
        <span *ngIf="!bold">
            {{labelText}}
        </span>
    </label>
</b>

请注意，app-tooltip标记位于标签之前。工具提示将为“浮动：右侧”-位于标签的最右侧。

现在...要使我的 new 标签带有工具提示（针对文本），我需要设置一个标志：flushToText：

<div class="col-xs-12 col-sm-3">
    <app-label 
        labelText="My New Label"
        tooltip="Tooltip is flush against text end"
        flushToText="true" <!-- here -->
        bold="true">
    </app-label>
</div>

现在，我将根据需要修改标签/提示。我正在测试该标志，然后从头开始构建整个标签和工具提示，这是两种方法之一，具体取决于它：

  <span *ngIf="!flushToText">
    <app-tooltip [id]="id" [tooltip]="tooltip"></app-tooltip>
    <b>
        <label>
            <span *ngIf="error" class="icon-error"></span>
            <span *ngIf="bold">
                <b>{{labelText}}</b>
            </span>
            <span *ngIf="!bold">
                {{labelText}}
            </span>
        </label>
    </b>
</span>

<span *ngIf="flushToText">
    <b>
        <label>
            <span *ngIf="error" class="icon-error"></span>
            <span *ngIf="bold">
                <b>{{labelText}}</b>
            </span>
            <span *ngIf="!bold">
                {{labelText}}
            </span>
        </label>
    </b>
    <app-tooltip flushToText="true" [id]="id" [tooltip]="tooltip"></app-tooltip>
</span>

这是我的问题。有没有比复制整个块并将一个标记放到flag = true内，另一个放置在flag = false内更有效的更改代码的方法？

Answer 1

您可以同时添加两个工具提示，并*ngIf

<span>
    <app-tooltip *ngIf="!flushToText" [id]="id" [tooltip]="tooltip"></app-tooltip>
    <b>
        <label>
            <span *ngIf="error" class="icon-error"></span>
            <span *ngIf="bold">
                <b>{{labelText}}</b>
            </span>
            <span *ngIf="!bold">
                {{labelText}}
            </span>
        </label>
    </b>
    <app-tooltip *ngIf="flushToText" flushToText="true" [id]="id" [tooltip]="tooltip"></app-tooltip>
</span>

Answer 2

您可以直接将其绑定到flushToText，而不是将<span>绑定到周围的<app-tooltip>，这样就可以有条件地决定要渲染哪个。

<span>
    <app-tooltip *ngIf="!flushToText" [id]="id" [tooltip]="tooltip"></app-tooltip>
    <b>
        <label>
            <span *ngIf="error" class="icon-error"></span>
            <span *ngIf="bold">
                <b>{{labelText}}</b>
            </span>
            <span *ngIf="!bold">
                {{labelText}}
            </span>
        </label>
    </b>
    <app-tooltip *ngIf="flushToText" flushToText="true" [id]="id" [tooltip]="tooltip"></app-tooltip>
</span>

在条件

2 个答案: