Angular Material 2- Sidenav如何从服务中打开/关闭sidenav

Question

我的侧边栏()位于一个名为'program-body.component‘的组件中。

program-body.component.html：

<mat-sidenav-container id="body_container" class="row zeroMargin fullheight">
    <!-- This is the HTML for the inside of the modal -->
    <mat-sidenav #sidenav id="sidebarContainer" mode="side" class="fullheight">
        <!-- Sidebar HTML body -->
    </mat-sidenav>
    <button md-mini-fab class="example-fab" (click)="sidenav.toggle(); dataService.sidebarClicked();">
        <mat-icon>exit_to_app</mat-icon>
    </button>
</mat-sidenav-container>

我在一个完全不同的组件('othercomponent.component')中有一个按钮，我希望能够在其中调用函数，比如我的侧边栏组件中的(click)="sidenav.toggle()“。

other-COMPOMENT.COMPOMENT.html：

<button mat-raised-button style="width:49%" (click)="parseUserInput()">Read Transit Stops</button>

other-COMPOMENT.Component.ts：

public parseUserInput(){
    //I want to run the sidenav.toggle function now
    //   something like 'this.globalService.closeSidebar();'
    dialogModal.open();
}

如何使这些sidenav函数在全球范围内可用？理想情况下，我希望有一种方法使“program-body.component”中的函数可以在“globalservice”服务中访问，这样当从继承它的另一个组件调用时，它就可以控制它。

Answer 1

使用"globalservice“服务的想法是正确的:)

您可以尝试创建可注入的服务，如下所示：

import { Observable ,  Subject } from 'rxjs';
import { Injectable } from '@angular/core';

@Injectable()
export class ShareService {

    // Observable source
    private emitToggled = new Subject();

    // Observable stream
    toggleEmitted$ = this.emitToggled.asObservable();

    // Service toggle command
    emitToggle() {
        this.emitDeleted.next();
    }
}

把它放到你的app.module.ts里

@NgModule({ providers: [ ShareService ] });

然后把它注入你的program-body.component

constructor(private share : ShareService) {  }

通过以下方式订阅：

this.share.toggleEmitted$.subscribe(() => {
    console.log("toggled!");
});

在你的othercomponent.component中注入和上面一样的东西。

使用：this.share.emitToggle();发出切换

这里的Angular文档中对此进行了解释：https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

如果您不想使用发射器，只需使用变量

//在您的服务

@Injectable()
export class ShareService {
  toggle:boolean;
}

//在您的程序-body.component中

<div *ngIf="toggle">toggle is true</div>

get toggle()
{
    return this.shareService.toggle;
}

//在您的othercomponent.component中

set toggle(value)
{
   this.shareService.toggle=value;
}
get toggle()
{
    return this.shareService.toggle;
}
click()
{
    toggle=!toggle;
}