У меня есть компонент, который принимает динамический c контент. Один из которых должен быть предметом в <mat-menu>
. Это работает, но мой «внешний» mat-menu-items
не имеет такой же parentMenu
(он не определен), как мой «внутренний» mat-menu-items
после завершения рендеринга. Это приводит к тому, что подменю рендеринга не работают должным образом.
widget.component.ts
@Component({
selector: 'app-widget',
templateUrl: './widget.component.html',
styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements AfterViewInit {
// The matMenu all the items should be connected to
@ViewChild('actionsMenu', {static: false}) actionsMenu: MatMenu;
// The matMenuItem's inserted into this component externally
@ContentChildren(MatMenuItem) menuItems: QueryList<MatMenuItem>;
constructor() { }
ngAfterViewInit() {
// By listing out these, I find that none of them have `_parentMenu` set.
console.log(this.menuItems);
}
}
widget.component. html
<!-- The menu trigger -->
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
<!-- The menu -->
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item type="button" (click)="doStuff()">
Standard 1
</button>
<button mat-menu-item type="button" (click)="doSomethingElse()">
Standard 2
</button>
<!-- Insert dynamic items -->
<ng-content select="[app-widget-actions]"></ng-content>
</mat-menu>
app.component. html
<app-widget>
<!-- Actions menu -->
<ng-container app-widget-actions>
<button mat-menu-item [matMenuTriggerFor]="custom">
Custom task
</button>
<mat-menu #custom="matMenu">
<button mat-menu-item type="button">Custom task 1</button>
<button mat-menu-item type="button">Custom task 2</button>
</mat-menu>
</ng-container>
</app-widget>
Это сделает виджет и весь контент в порядке. Но пункт меню «Пользовательское задание», определенный в app.component.html
, не будет отображаться как подменю (которое должно открываться в стороне при наведении курсора). Я ожидаю, что приведенное выше создаст следующую структуру меню:
- Menu
|- Standard 1
|- Standard 2
|- Custom task
|- Custom task 1
|- Custom task 2
Вместо этого он выдаст:
- Menu
|- Standard 1
|- Standard 2
|- Custom task
, где «Пользовательское задание» будет реагировать только на нажатие (например, * 1029). * без родительского меню).
Мой вопрос; Как я могу отобразить «Меню действий» как часть <mat-menu>
внутри моего widgets.component?
Редактировать : из-за отсутствия ответа на этот вопрос я понимаю, что никто не имеет никаких советов, чтобы сделать эту работу из коробки. Поэтому я надеюсь, что команда angular сможет обеспечить функциональность, необходимую для этой работы. Итак, я создал запрос функции здесь: https://github.com/angular/components/issues/18123