angular - 我将如何在另一个组件中切换侧边栏？

Question

我有一个带有 mat-toolbar 的标题组件，我有一个按钮，我想用它来切换另一个组件中的 sidenav 栏。如何在另一个组件中切换侧边栏？

我想在标题组件下方切换它。

https://stackblitz.com/edit/angular-adkpkv

我在这里复制了我的整个项目，但我似乎无法让它在 stackbitz 中运行。不过它确实在本地运行。

Answer 1

我建议你使用 services .优点是它们非常容易上手且易于使用。此外，每个组件甚至其他服务都可以访问服务，您可以根据需要从任意多个不同的组件切换侧边栏。 如果您熟悉例如C#，服务的行为类似于 C# 中的单例。

因此，您应该通过在 Angular CLI 中键入 ng g s toggle 来创建一个新服务。

import { Injectable } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class ToggleService {

    constructor() { }
}

---

解决方案一:

这是没有漂亮动画的更简单的方法。切换侧边栏组件的最简单方法是将其放置在正确的位置，但设置 display: none。然后使用 ngClass 根据属性为侧边栏组件设置一个 css 类。将此代码应用到最顶部的侧边栏组件的标记中。

[ngClass]="{'show-sidebar': toggleService.showSidebar}"

为了让它工作，您必须在侧边栏的 css 中创建一个新的 css 类。添加:

.show-sidebar { 
    display: block;
}

之后，您向服务添加一个属性。

private _showSidebar = false;
public get showSidebar(): boolean{
    return this._showSidebar;
}
public set showSidebar(v : boolean) {
    this._showSidebar = v;
}

现在您将服务注入(inject)侧边栏组件并将其分配给一个属性，以便能够在您的 html 文件中引用该服务。因此，您可以使用 showSidebar 的 bool 值来切换 show-sidebar css 类。

接下来就是将服务注入(inject)到按钮所在的组件中，您可以使用它来切换侧边栏。之后，您将点击事件添加到您将 toggleService.showSidebar 的值更改为 true 的按钮。

---

解决方案 2:

现在如果你想使用例如Angular Animations您可以向服务添加一个属性，您可以从一个组件更改该属性，并且该更改将切换动画状态以使侧边栏动画化以移动到屏幕中。

private _sideBarState = 'inactive';
public get sideBarState(): string {
    return this._sideBarState;
}
public set sideBarState(v : string) {
    this._sideBarState = v;
}

接下来，您将 sliderState 绑定(bind)到 html 中的组件，因此在侧边栏组件的 html 中。只需将其添加到侧边栏最顶部的标签中即可。

[@sliderState]="toggleService.sideBarState"

要做到这一点，您必须先将 toggleService 注入(inject)到侧边栏组件中。如果您对此有疑问，请尽管问我。

之后，您必须在要设置动画的组件(侧边栏组件)的装饰器中添加不同的动画。

@Component({
selector: 'core-detail-page',
templateUrl: './detail-page.component.html',
styleUrls: ['./detail-page.component.scss'],
animations: [
    trigger('sliderState', [
        state('active', style({
            left: '0',
            display: 'block'
        })),
        state('inactive', style({
            left: '-300px',
            display: 'none'
        })),
        transition('inactive => active', animate('300ms ease-out')),
        transition('active => inactive', animate('300ms ease-out'))
    ])
]

})

这些只是一些虚拟值，我假装您的侧边栏组件设置为 position: absoulte 并放置在您的屏幕旁边，那些 -300px。一旦您将 toggleService 中的 sidebarState 的值更改为 active 属性 left 和 display 将根据您对动画的定义进行动画处理。您可以为您想要的任何属性设置动画。

更改 sidebarState 是通过将 toggleService 注入(inject)到要用于切换侧边栏的按钮所在的组件中来完成的。注入(inject)服务后，向按钮添加点击方法，并在该方法中更改 sidebarState 的值。

toggleSidebar() {
    this.toggleService.sideBarState = 'active';
}