Открытие сиденав компонента - PullRequest
0 голосов
/ 14 ноября 2018

Я пытаюсь скопировать этот подход:

StackBlitz

Прямо сейчас у меня есть компонент 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();
    }
}

Так что, кажется, все выглядит хорошо, но мой вопрос, технически это нормально? Навбар находится внутри контента, если я выставлю ее снаружи, она не откроется. Я хочу отделить, потому что считаю более чистым отделить боковую панель. Все связанные события и другие настраиваемые действия могут быть внутри него, а не спамом моего основного компонента. Но я не знаю, правильно ли то, чего я пытаюсь достичь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...