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-component.component.html：

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

other-component.component.ts：

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

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

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;
}

//在您的program-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;
}

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

2 个答案: