我如何在打字稿中为 Angular 5 设置 zindex

Posted 2023-02-22

【中文标题】我如何在打字稿中为 Angular 5 设置 zindex

【英文标题】：How can i set zindex in typescript for angular 5

【发布时间】：2018-12-30 18:10:15

【问题描述】：

我正在尝试为使用打字稿的课程设置zindex。但它不起作用。如果您有任何想法，请与我分享。

 ngOnInit()  (<htmlElement>document.querySelector('.pagemode')).style.z-index = 1;

【问题讨论】：

也许这可以帮助你：***.com/questions/35882670/…

【参考方案1】：

您可能会更好地使用内联样式绑定而不是使用querySelector - 视情况而定

<p [style.z-index]="1">
  Some text
</p>

【讨论】：

我是一名 C# 开发人员，正在努力学习这些东西 - 不反对你所说的，但是......为什么你的例子可能会更好？

document.querySelector 绕过了 Angular 的所有模板绑定功能

【参考方案2】：

您可以使用NgStyle 指令来设置zindex

[ngStyle]="'z-index':condition ? 9 : 0 "

【参考方案3】：

您可以使用NgClass 指令而不是操纵DOM。

在您的 Css/Scss 文件中：

.class1 
  z-index: -1;


.class2 
   z-index: 1;

在您的 TS 文件中：

YourBooleanVariableNameHere : boolean;
ngOnInit() 
    this.YourBooleanVariableNameHere = true;

在您的 Html 文件中：

如果满足你的条件：

<some-element [ngClass]="'class1 class2' : YourBooleanVariableNameHere ">...</some-element>

如果你的条件不满足：注意变量中有!符号

<some-element [ngClass]="'class1' : !YourBooleanVariableNameHere ">...</some-element>

阅读Usage Notes 了解更多示例。更多方法请参考here，

或者您也可以尝试相同的方法，不推荐！

更新：

ngOnInit() 
    document.getElementsByClassName("pagemode")[0].style.zIndex = 1;

Working example available here!

【讨论】：

按打字稿...不是内联

以上代码不是内联的，它的绑定！我们已经编写了 css 类（您可以相应地放置它）。

我会说操纵DOM 是不正确的方法。尝试最大限度地利用 Angular 功能。

gettign 错误：“元素”类型上不存在属性“样式”。任何

让我们continue this discussion in chat。