angular - ng-content 和 toogable 文本居中

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>

状态 1

状态 2

我希望 ng 内容与第二张图片完全相同，但是当文本鼠标退出 ng-content 时，文本会消失（应该如此）并且内容会向左移动。

Answer 1

通常，如果响应不完全符合您的要求，您会使用变量-抱歉-，所以想象一些像

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

当鼠标进入你的.ts中定义的变量时变为真，当鼠标移出时变量变为假。当变量为真时 [style.text-align] 为中心，style.text-align为假时为空（如果为空，则删除属性）。

您也可以在 .css 中使用一个类center并使用类似

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

或者

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