ng-content 和 toogable 文本居中

Posted 2023-03-29

【中文标题】ng-content 和 toogable 文本居中

【英文标题】：ng-content and tooglable text centered

【发布时间】：2021-12-15 10:46:40

【问题描述】：

我需要我的 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 时，文本会消失（应该如此）并且内容会向左移动。

【问题讨论】：

请同时提供mouseLeave()和mouseEnter()函数。

【参考方案1】：

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

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

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

你也可以在你的 .css 中使用 center 类并使用类似

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

或

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