ng-content和tooglable文本居中

Question

我需要我的ng内容和文本居中对齐，这是当前的情况：

<div
    (mouseenter)="mouseEnter()"
    (mouseleave)="mouseLeave()"
    style="text-align: center"
>
    <ng-content></ng-content>
</div>

<span style="text-align: center" *ngIf="isTitleVisable">
    {{ title }}
</span>
<div *ngIf="!isTitleVisable"><br /></div>

state 1

state 2

我希望ng内容像第二张图片一样留在原处，但是当文本鼠标退出ng-content时，文本就消失了(正如它应该的那样)，内容就会向左移动。

Answer 1

通常，如果响应不完全符合您的需求，则使用变量-sorry，因此可以想象如下所示

<div (mouseenter)="on=true"
     (mouseleave)="on=false"
     [style.text-align]="on?'center':null"
>
    <ng-content></ng-content>
</div>

当鼠标输入.ts中定义的变量时，该变量变为真；当鼠标移出时，该变量变为假。当变量为true时，style.text-align为中心；当变量为false时，则为null (如果为null，则angular删除style.text-align属性)。

您还可以在.css中使用类center，并使用类似

  [class.center]="on?true:null"

或

   [ngClass]="on?'center':null"