У меня есть два компонента Панель инструментов и Sidenav. Я хочу переключить ящик sidenav и отобразить его содержимое, вызвав его на панели инструментов. .Данный ниже компонент панели инструментов содержит кнопку для переключения sidenav
<button mat-button (click)="onToggleSidenav()"><mat-icon>widgets</mat-icon>{{ 'WIDGETS' | translate }}</button>
Также ниже приведены шаблон Sidenav, а сервисный код sidenav содержит выдвижную панель / вид боковой панели для отображения. Я создал сервис sidenav, который я нашел в какой-то статье, но мне не ясно, как использовать его для связывания родительского и дочернего компонентов, в данном случае это Toolbar (Parent) и Sidenav (child).
<mat-drawer #drawer mode="side" position="end">
<mat-drawer-content>
<mat-list style="padding: 10px;">
<mat-card *ngFor="let item of toolPaletteItems"
style="padding: 8px; margin-bottom: 10px; text-align: center;">
<img mat-card-sm-image
[src]="item.icon"
[alt]="item.name"
draggable="true"
(dragstart)="onDragStart($event, item.id)">
<mat-card-content>
<mat-card-subtitle>
{{item.name}}
</mat-card-subtitle>
</mat-card-content>
</mat-card>
</mat-list>
</mat-drawer-content>
</mat-drawer>
</mat-drawer-container> ```
import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
@Injectable({
providedIn: 'root'
})
export class SidenavService {
private sidenav: MatSidenav;
private opened = false;
constructor() {}
public setSidenav(sidenav: MatSidenav) {
// if (!sidenav) {
// console.log('NavComponent: sidenav cannot be null');
// }
this.sidenav = sidenav;
}
public open() {
this.opened = true;
return this.sidenav.open();
}
public close() {
this.opened = false;
return this.sidenav.close();
}
public toggle() {
this.opened = !this.opened;
return this.sidenav.toggle();
}
// public isOpen(): boolean {
// return this.opened;
// }
}