Я пытаюсь скопировать этот подход:
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();
}
}
Так что, кажется, все выглядит хорошо, но мой вопрос, технически это нормально? Навбар находится внутри контента, если я выставлю ее снаружи, она не откроется. Я хочу отделить, потому что считаю более чистым отделить боковую панель. Все связанные события и другие настраиваемые действия могут быть внутри него, а не спамом моего основного компонента. Но я не знаю, правильно ли то, чего я пытаюсь достичь