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存在某些问题，因此存在一个错误。 See this discussion

有一个固定链接。我尝试使用以下对应的上层html：

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

    return classes;
}

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

Answer 1

将attr.class与私有方法一起使用，该方法返回应该使用的类。不确定是否使用了classList.js shim，我会将其包含在内，以备未来可能出现的错误。

<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>

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

1 个答案: