Question

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

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

然后我的HTML文件中有一个使用ngClass的div：

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

其中＆＃34;可见＆＃34;是我的TS文件中的一个布尔值，单击按钮时设置（或取消设置）。我可以看到＆＃34;打开＆＃34;单击按钮时正确应用和删除的类。但是，没有添加与该类一起使用的其他样式。

一切似乎都应该如此，但额外的风格并没有被添加。我可以在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;
        }
    }
}

我认为＆＃34;打开＆＃34; class会覆盖其他东西，但它只会将它放在＆＃34; .nav-menu-fixed＆＃34;之外。

所以现在它在Chrome中运行得非常好。它也适用于Firebox，但其位置与Chrome中的位置不同（也不是字体大小）。在Edge（IE）中，它根本不起作用。我甚至不认为菜单组件（或至少包含要点击的项目的部分）甚至被渲染，因为我根本没有在源头中看到它。

未应用ngClass样式

0 个答案: