Question

我正在尝试复制这种方法：

现在我有一个组件A

<mat-sidenav-container class="kanban-board-container">
    <my-sidenav-component>
    </my-sidenav-component>
    <mat-sidenav-content>
    </mat-sidenav-content>
</mat-sidenav-container>

和my-sidenav-component

<mat-sidenav #sidenav mode="side"  class="rightSidenav"
[fixedInViewport]="true" [fixedTopGap]="250">
    HELLO MISTER SIDENAV
</mat-sidenav>

my-sidenav-component就是这样

import { MatSidenav } from '@angular/material';
import { SidenavService } from './../../../shared/services/common/sidenav.service';
import { Component, ViewChild, Inject, OnInit } from '@angular/core';
import { ComponentHelper } from '../../../shared/services/';

@Component({
  selector: 'my-sidenav-component',
  templateUrl: './my-sidenav.component.html',
})

export class mySideNav implements OnInit{

  @ViewChild('sidenav') public sidenav:MatSidenav;
  constructor(@Inject(SidenavService) private _sideNavService: SidenavService) {}

  ngOnInit(){
    this._sideNavService.setSidenav(this.sidenav);
  }

  open(): void {
    this._sideNavService.open();
  }

  close(): void {
    this._sideNavService.close();
  }
}

和服务

import { Injectable, NgModule } from '@angular/core';
import { MatSidenav } from '@angular/material';
@Injectable()
@NgModule()
export class SidenavService {
    private sidenav: MatSidenav;

    public setSidenav(sidenav: MatSidenav) {
        console.log("sidenav"+ sidenav)
        this.sidenav = sidenav;
    }

    public open() {
        console.log("open",this.sidenav)
        return this.sidenav.open();
    }


    public close() {
        return this.sidenav.close();
    }

    public toggle(): void {
        this.sidenav.toggle();
    }
}

所以一切看起来都不错，但是我的问题是，从技术上来说还可以吗？导航栏位于内容的内部，如果我将其放在外部，它将无法打开。我想分开，因为我相信分开边栏更干净。所有相关事件和其他自定义操作都可以包含在其中，而不是垃圾邮件。但是我不知道我尝试达到的目标是否正确

打开组件的导航

0 个答案: