Упаковочное меню Компонент Угловой материал 6 - PullRequest
Новая
       8

Упаковочное меню Компонент Угловой материал 6

0 голосов
/ 05 сентября 2018

Я обертываю компонент меню угловой материал. Я расширяю MatMenuTrigger, MatMenuItem, создавая их как отдельные директивы и используя их в родительском компоненте. В дочернем компоненте (компонент Menu) я использую только mat-menu для получения ссылки, а в родительском компоненте (компонент Menu-demo) присоединяю меню (которое находится в дочернем компоненте) к любому элементу управления, который мы хотим. Я не должен использовать тег кнопки внутри дочернего компонента, поэтому я использовал ng-content для получения содержимого от родителя. Я просто хочу предоставить какое-то свойство для получения этой ссылки. Вот мой вопрос, как обернуть это справочное меню, stackblitzlink . Пожалуйста, помогите мне в этом, заранее спасибо.

1 Ответ

0 голосов
/ 12 сентября 2018

Директива меню не обязательна. Вы можете выставить дочерний элемент MatMenu и ссылаться на него как на свойство содержащего компонента и использовать его напрямую с директивой MatMenuTrigger:

menu.component.ts: 

@Component({
    selector: 'sq-menu',
    templateUrl: './menu.component.html',
})

export class MenuComponent {
   @ViewChild('menu') matMenu: MatMenu;
}

menu.component.html: 

<mat-menu #menu="matMenu">
    <ng-content></ng-content>
</mat-menu>

Использование: 

<button mat-raised-button [matMenuTriggerFor]="menu.matMenu">home</button>
<sq-menu #menu>
    <button mat-button>
        Item1
    </button>
</sq-menu>

StackBlitz

...