Компонент меню обертывания материала Angular 6

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


typescript angular6 angular-directive angular-material-6
person Shreelakshmi G    schedule 05.09.2018    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Директива меню не нужна. Вы можете выставить дочерний элемент 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

person G. Tranter    schedule 12.09.2018
comment
Спасибо за ответ, здесь я не должен использовать его как matMenuTriggerFor в обернутом компоненте, он должен быть обернут другим примером имени: sqMenuTriggerFor и его значение также menu.someMenu, а не мат-меню. Мне нужно обернуть его, сохранив ту же функциональность - person Shreelakshmi G; 12.09.2018
comment
Зачем делать то, что тебе не нужно? Не понятно, зачем вам это нужно. - person G. Tranter; 12.09.2018