Angular中TemplateRef未初始化导致bu-menu组件渲染异常

问题根因 #

你实现的bu-menu-list组件通过@ContentChildren查询的是BulmaMenuListItemComponent实例，但你在使用示例里直接把<a>标签、<ul>标签作为bu-menu-list的直接子元素，没有用定义好的bu-menu-list-item组件包裹，所以查询到的menuItems是空列表，自然不会渲染任何li元素。

之前的面包屑组件可以正常工作，是因为你在使用时每个项都套了bu-breadcrumb组件，能被正常查询到。

解决方案 #

方案1：调整使用方式，沿用面包屑的嵌套逻辑 #

把使用代码里每个菜单项都用bu-menu-list-item包裹即可：

<bu-menu>
  <bu-menu-label>General</bu-menu-label>
  <bu-menu-list>
    <bu-menu-list-item><a>Dashboard</a></bu-menu-list-item>
    <bu-menu-list-item><a>Customers</a></bu-menu-list-item>
  </bu-menu-list>
  <bu-menu-label>Administration</bu-menu-label>
  <bu-menu-list>
    <bu-menu-list-item><a>Team Settings</a></bu-menu-list-item>
    <bu-menu-list-item><a class="is-active">Manage Your Team</a></bu-menu-list-item>
    <bu-menu-list-item>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </bu-menu-list-item>
    <bu-menu-list-item><a>Invitations</a></bu-menu-list-item>
    <bu-menu-list-item><a>Cloud Storage Environment Settings</a></bu-menu-list-item>
    <bu-menu-list-item><a>Authentication</a></bu-menu-list-item>
  </bu-menu-list>
  <bu-menu-label>Transactions</bu-menu-label>
  <bu-menu-list>
    <bu-menu-list-item><a>Payments</a></bu-menu-list-item>
    <bu-menu-list-item><a>Transfers</a></bu-menu-list-item>
    <bu-menu-list-item><a>Balance</a></bu-menu-list-item>
  </bu-menu-list>
</bu-menu>

方案2：优化组件逻辑，无需额外嵌套标签 #

如果不想让用户多写一层bu-menu-list-item，可以直接修改bu-menu-list组件逻辑，直接获取所有子内容渲染到li中，不需要额外的子组件：

@Component({
  selector: 'bu-menu-list',
  template: `
    <ul class="menu-list">
      <li *ngFor="let item of childItems">
        <ng-container *ngTemplateOutlet="item"></ng-container>
      </li>
    </ul>
  `,
})
export class BulmaMenuListComponent {
  // 直接查询所有子内容的模板引用
  @ContentChildren(TemplateRef, { read: TemplateRef }) childItems!: QueryList<TemplateRef<any>>;

  constructor() {}
}

修改后可以保持你现有的使用代码不变，也能正常渲染出符合预期的菜单效果。

内容的提问来源于stack exchange，提问作者Joseph Quinn