样式不适用于 angular 侧边栏切换按钮

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;，为此我查看了控制台并在 [= 上找到了一个属性13=]标签为ng-reflect-opened，那么我写了如下样式：

ng-sidebar[ng-reflect-opened=true] + div[_ngcontent-oer-c1] > div[_ngcontent-ocs-c0] a#show-sidebar {
    left: 300px;
}

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

Note: Sidebar is toggling just to add style to toggle button.

Answer 1

这可以通过 class 绑定 来完成，只需在您的 CSS 中创建一个 class 作为：

.toggled {
    left: 300px;
}

由于您的 .ts 文件中有一个属性 _opened，它是布尔值，因此只需将其添加到您想要的元素中：[ngClass]="{toggled : _opened}". 希望它会有所帮助:)

样式不适用于 angular 侧边栏切换按钮

Style not working on angular sidebar toggle button

html

javascript

css

sidebar

angular