无法在垫子菜单项上使用customDirective

Question

我想将myCustomDirective与mat-menu-item指令一起使用。但是myCustomDirective不会应用于带有mat-menu-item的元素。而且它也不会引发任何错误。

我尝试使用ng-container和ng-template在不同的元素上同时使用myCustomDirective和mat-menu-item，但是没有用。

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" myCustomDirective="x">
  <button mat-menu-item>
     item1
  </button>
  <button mat-menu-item myCustomDirective="y">
    item2
  </button>
  <button mat-menu-item myCustomDirective="z">
     item3
  </button>
</mat-menu>


@Directive({
    selector: '[myCustomDirective]'
})
export class MyCustomDirective {

       @Input() myCustomDirective: string;

        constructor( private element: ElementRef,
        private renderer: Renderer2
        ) { }

        ngAfterViewInit() {
            console.log(this.myCustomDirective);
            this.renderer.setStyle(this.element.nativeElement, 
               'border-style', 'dashed');
        }
}

预期：MyCustomDirective应该应用于mat-menu-item 实际：MyCustomDirective没有得到应用