Question

我是Angular的新手，并且通过 NPM安装了ng-sidebar组件，我已经设计了侧边栏：

component.html：

<ng-sidebar-container>
    <ng-sidebar 
        [(opened)]="_opened"
        mode="push"
        autoCollapseWidth=500>
        <div>
            <!-- Sidebar-content goes here -->
        </div>

    </ng-sidebar>

    <div ng-sidebar-content>
        <router-outlet></router-outlet>
        <a id="show-sidebar" class="btn btn-sm btn-dark" href="#" (click)="_toggleSidebar()">
            <i class="fas fa-bars"></i>
        </a>
    </div>

</ng-sidebar-container>

现在，我上面有一个ID为#show-sidebar的切换按钮，我想在侧边栏打开时在其上应用left: 300px;，为此，我在控制台上查找了{{1} }标记为ng-sidebar，然后我编写了以下样式：

ng-reflect-opened

但是它不起作用！有什么建议吗？

注意：侧边栏仅用于添加样式以切换按钮。

Answer 1

这可以通过类绑定完成，只需在CSS中创建一个类为：

.toggled {
    left: 300px;
}

由于您在 .ts 文件中拥有一个属性_opened，该属性是布尔型，因此只需将其添加到所需的元素：[ngClass]="{toggled : _opened}"中即可。希望会有所帮助：）

样式在侧边栏切换按钮上不起作用

1 个答案: