Angular2检查元素的类答案

【问题标题】：Angular2 Check the Class of an ElementAngular2检查元素的类
【发布时间】：2016-09-05 08:01:25
【问题描述】：

我想访问一个元素的类来检查它是“折叠”还是“折叠”。我想做类似的事情：

<span *ngIf=" class == 'collapse in' "> - </span>
<span *ngIf=" class == 'collapse'    "> + </span>

有没有一种简单的方法可以在 Angular2 上获取元素的类？

【问题讨论】：

标签： javascript twitter-bootstrap angular

【解决方案1】：

通常在 Angular2 中，设置应该是相反的，模型被更新并且视图反映了模型。这样你就不需要访问 DOM 来检查它的状态。但是，如果您必须这样做：

<span #span *ngIf="hasClass(span.className, 'collapse') && hasClass(span.className, 'in')"> - </span>
<span #span *ngIf="hasClass(span.className, 'collapse')"> + </span>

hasClass(classes, cls) {
    return (' ' + classes + ' ').indexOf(' ' + cls + ' ') > -1;
}

https://developer.mozilla.org/de/docs/Web/API/Element/className

或

<span #span *ngIf="span.classList.contains('collapse') && span.classList.contains('in')"> - </span>
<span #span *ngIf="span.classList.contains('collapse')"> + </span>

【讨论】：

hasClass(classes,cls) 函数中是否有错字？ “className”应该是“classes”吗？
我认为它应该适用于className。您也可以使用classList.contains()。 developer.mozilla.org/en-US/docs/Web/API/Element/classList。这足够短，可以在组件中没有方法的情况下内联使用，但在某些情况下尚不支持（IE 和 SVG 元素，例如 AFAIR）
我的意思是应该是 return (' ' + classes + ' ').indexOf(' ' + cls + ' ') > -1;它是这样工作的。
您可以从中访问模板引用的上下文可能有所改变。我创建了一个能够访问跨度的子 div。