Angular：svg 上的 attr.class 不适用于 IE

Question

我想表明用户是否喜欢某个元素。

svg 有一个用于基本样式的类： favoritesStar 。 如果用户喜欢该元素，则应该有第二个类： favoritesStarActive 。

<div class="favoriteStarWrapper">
    <svg [ngClass]="getFavoriteStarClasses(project)" viewBox="0 0 99.109 94.258" enable-background="new 0 0 99.109 94.258" xml:space="preserve">
        <polygon points="49.555,0 64.868,31.028 99.109,36.003 74.333,60.155 80.181,94.258 49.555,78.156 18.928,94.258 24.777,60.155 0,36.003 34.241,31.028 " />
    </svg>
</div>

通常我们使用普通的class="favoritesStar"和[class.favoritesStarActive]="project.IsUserFavorite" 。 顺便说一下， project是异步的。

由于 IE 的某些问题，存在一个错误。 请参阅此讨论。

有一个修复链接。 我用以下对应的上层 html 尝试了它：

private getFavoriteStarClasses(project: Project) {
    let classes = "favoritesStar";
    if (project.IsUserFavorite) {
        classes = classes + " favoritesStarActive";
    }

    return classes;
}

奇怪的是，这在 Chrome 上没有问题，尽管在检查IsUserFavorite属性时 IE 总是返回 false。

Answer 1

将attr.class与返回应该使用的类的公共方法一起使用。 不确定是否使用了 classList.js 垫片，我将保留它以备将来可能出现的错误。

<svg [attr.class]="getFavoriteStarClasses(project)" viewBox="0 0 99.109 94.258" enable-background="new 0 0 99.109 94.258" xml:space="preserve">
    <polygon points="49.555,0 64.868,31.028 99.109,36.003 74.333,60.155 80.181,94.258 49.555,78.156 18.928,94.258 24.777,60.155 0,36.003 34.241,31.028 " />
</svg>