Я работаю в сети Angular 9 со многими модулями и подмодулями. Дело в том, что мне нужно реализовать меню с модулями и потомками, используя аккордеонную структуру. Также я использую материал desigin и мне нужно реализовать эту функцию с mat-nav-list, mat-list-item и a (я не ищу решение с mat-extension-panel, ul, li, мне нужно как css решение для mat-list-item)
вот пример шаблона -> https://primer.fusepx.com/angular/
И это изображение именно то, что я хочу сделать
Я получил предыдущую версию шаблона в angular 4 и попытался адаптировать стили к своему новому приложению, но что-то пошло не так и стиль не работал. Вот результат, который я получил:
s css для этого достаточно велико, и я не могу поставить демонстрацию с помощью stackblitz 'couse много что-то не работает
но в основном я использую 3 разные директивы, чтобы поместить класс .open в ссылку меню, и мне интересно, есть ли другой способ сделать это меню с помощью mat-nav-list, mat -list-Item и директивы
DIRECTIVES
ACCORDION DIRECTIVE
import { Directive, OnInit, AfterViewInit, AfterContentChecked } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/operators';
import { AccordionLinkDirective } from './accordionlink.directive';
import { filter } from 'rxjs/operators';
@Directive({
selector: '[appAccordion]',
})
export class AccordionDirective implements AfterContentChecked {
protected navlinks: Array<AccordionLinkDirective> = [];
closeOtherLinks(openLink: AccordionLinkDirective): void {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link !== openLink) {
link.open = false;
}
});
}
addLink(link: AccordionLinkDirective): void {
this.navlinks.push(link);
}
removeGroup(link: AccordionLinkDirective): void {
const index = this.navlinks.indexOf(link);
if (index !== -1) {
this.navlinks.splice(index, 1);
}
}
checkOpenLinks() {
this.navlinks.forEach((link: AccordionLinkDirective) => {
if (link.group) {
const routeUrl = this.router.url;
const currentUrl = routeUrl.split('/');
if (currentUrl.indexOf( link.group ) > 0) {
link.open = true;
this.closeOtherLinks(link);
}
}
});
}
ngAfterContentChecked(): void {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe(e => this.checkOpenLinks());
// this.router.events.filter(event => event instanceof NavigationEnd).subscribe(e => this.checkOpenLinks());
}
constructor( private router: Router) {
setTimeout(() => this.checkOpenLinks());
}
}
Директива об аккордеонных связях
import { Directive, HostBinding, Inject, Input, OnInit, OnDestroy } from '@angular/core';
import { AccordionDirective } from './accordion.directive';
@Directive({
selector: '[appAccordionLink]'
})
export class AccordionLinkDirective implements OnInit, OnDestroy {
@Input() public group: any;
@HostBinding('class.open')
@Input()
get open(): boolean {
return this._open;
}
set open(value: boolean) {
this._open = value;
if (value) { this.nav.closeOtherLinks(this); }
}
// tslint:disable-next-line: variable-name
protected _open: boolean;
protected nav: AccordionDirective;
constructor(@Inject(AccordionDirective) nav: AccordionDirective) {
this.nav = nav;
}
ngOnInit(): any {
this.nav.addLink(this);
}
ngOnDestroy(): any {
this.nav.removeGroup(this);
}
toggle(): any {
this.open = !this.open;
}
}
Директива об аккордеонных якорях
import { Directive, HostListener, Inject } from '@angular/core';
import { AccordionLinkDirective } from './accordionlink.directive';
@Directive({
selector: '[appAccordionToggle]'
})
export class AccordionAnchorDirective {
protected navlink: AccordionLinkDirective;
constructor( @Inject(AccordionLinkDirective) navlink: AccordionLinkDirective) {
this.navlink = navlink;
}
@HostListener('click', ['$event'])
onClick(e: any) {
this.navlink.toggle();
}
}
HTML
<mat-sidenav-container class="app">
<mat-sidenav mode="side" opened color="primary" class="sidenav dark sidebar-panel app-inner">
<div fxLayout="row wrap" fxLayoutAlign="center center">
<button mat-icon-button>
<mat-icon class="material-icons-round">menu</mat-icon>
</button>
</div>
<!-- MENU /////////////////////////////////////////////////////////////////// -->
<mat-nav-list appAccordion class="navigation navlist" role="list">
<mat-list-item appAccordionLink *ngFor="let menuitem of menu" [group]="menuitem.state" class="module-link" role="listitem">
<!-- LINK -->
<a appAccordionToggle class="relative" [id]="menuitem.state" [routerLink]="['/', menuitem.state]"
*ngIf="menuitem.type === 'link'">
<mat-icon *ngIf="menuitem.iconType==='icon'" class="material-icons-round">{{ menuitem.icon }}
</mat-icon>
<mat-icon *ngIf="menuitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
<path fill="currentColor" [attr.d]="menuitem.icon" /></svg></mat-icon>
<span>{{ menuitem.name }}</span>
<span fxFlex></span>
</span>
</a>
<!-- SUB LINK -->
<a appAccordionToggle class="relative" [id]="menuitem.state" href="javascript:;"
*ngIf="menuitem.type === 'sub'">
<mat-icon *ngIf="menuitem.iconType==='icon'" class="material-icons-round">{{ menuitem.icon }}
</mat-icon>
<mat-icon *ngIf="menuitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
<path fill="currentColor" [attr.d]="menuitem.icon" /></svg></mat-icon>
<span>{{ menuitem.name}}</span>
<span fxFlex></span>
<span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
<mat-icon class="menu-caret">arrow_drop_down</mat-icon>
</a>
<mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
<mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
<a [routerLink]="['/', childitem.state ]" class="relative">
<mat-icon *ngIf="childitem.iconType==='icon'" class="material-icons-round">
{{ childitem.icon }}</mat-icon>
<mat-icon *ngIf="childitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
<path fill="currentColor" [attr.d]="childitem.icon" /></svg></mat-icon>
<span>{{ childitem.name }}</span>
</a>
</mat-list-item>
</mat-nav-list>
</mat-list-item>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
Content
</mat-sidenav-content>
S CSS
Мой S CSS слишком большой - скачайте файл здесь ---> https://github.com/Chej0/accordion-style