1

我有一个包含 TS 文件的组件，其中包含此部分：

@Component({
    selector: 'nav-menu',
    templateUrl: './navmenu.component.html',
    styleUrls: ['./navmenu.component.scss']
})

然后，我的 HTML 文件中有一个 div 使用 ngClass，如下所示：

[ngClass]="{'open': visible}"

其中“可见”是我的 TS 文件中单击按钮时设置（或取消设置）的布尔值。当我单击按钮时，我可以看到“打开”类被正确应用和删除。但是，没有添加该类附带的其他样式。

一切似乎都是应有的，但没有添加额外的样式。我可以在 Chrome 开发人员工具中看到原始内容，并且看到正在添加的类，但样式没有改变。

有任何想法吗？

显然，我在 SASS 文件中的错误位置添加了额外的类。我有这样的：

$bg-primary: #007bff;

.nav-menu-fixed {
    position: fixed;
    top: 57px;
    left: 5px;
    width: 200px;
    border-radius: 10px;
    padding: 5px;
    visibility: hidden; 
    opacity: 0;
    transition: visibility 500ms, opacity 500ms;
    background-color: $bg-primary;

    .open {
        visibility: visible;
        opacity: 1;
    }

    .divider {
        height: 2px;
        width: 90%;
        background-color: silver;
        margin: 0 auto;
    }

    .item {
        padding: 10px;
        border-radius: 10px;

        &:hover {
            background-color: lighten(lightgray, 10%);
            color: black;
        }
    }
}

我认为“开放”类会覆盖它所做的其他东西，但前提是我将它放在“.nav-menu-fixed”之外。

所以现在它在 Chrome 中运行良好。它也适用于 Firebox，但位置看起来与 Chrome 中的不同（字体大小也不相同）。而在 Edge (IE) 中，它根本不起作用。我什至不认为菜单组件（或至少包含要单击的项目的部分）甚至被渲染，因为我在源代码中根本看不到它。

4

0 回答 0