使用 ng-content 插入菜单项

Question

我有一个接收动态内容的组件。其中之一应该是<mat-menu>. 这种作品，但我的“外部”在渲染完成后与我的“内部”mat-menu-items不一样parentMenu（它是未定义的）mat-menu-items。这使得渲染子菜单的行为不符合预期。

小部件.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);
  }
}

小部件.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>

应用程序组件.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

其中“自定义任务”只会在点击时做出反应（就像mat-menu没有父菜单一样）。

我的问题是；如何将“操作菜单”呈现为<mat-menu>我的 widgets.component 内部的一部分？

编辑：由于对这个问题缺乏回应，我认为没有人有任何提示可以使这项工作开箱即用。因此，我希望 angular 团队能够提供使其工作所需的功能。所以我在这里创建了一个功能请求：https : //github.com/angular/components/issues/18123