单独组件中的材料子菜单不会在鼠标悬停时打开

Question

我注意到 Angular Material 中的这种行为，如果我在单独的组件中移动子菜单，它不会在鼠标悬停时打开，就像它在与其父菜单相同的组件中定义的那样。

例如，此菜单在鼠标悬停时打开：

<button mat-button [matMenuTriggerFor]="menu">
  Menu
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="submenu">
    Submenu
  </button>
  <mat-menu #submenu>
    <button mat-menu-item>Submenu Item</button>
  </mat-menu>
</mat-menu>

此菜单不会在鼠标悬停时打开：

// menu.component.html
<button mat-button [matMenuTriggerFor]="menu">
  Menu
</button>
<mat-menu #menu="matMenu">
  <app-submenu></app-submenu>
</mat-menu>

// submenu.component.html
<button mat-menu-item [matMenuTriggerFor]="submenu">
  Submenu
</button>
<mat-menu #submenu>
  <button mat-menu-item>Submenu Item</button>
</mat-menu>

StackBlitz example

子菜单的对齐方式似乎也有些不同。嵌套菜单应该总是在同一个组件中吗？