javascript - 如何将 ng-content 与 ng-container 一起使用？

Question

当我的组件位于 ng-container 中时，我无法显示它们。我有一个正在循环的项目数组，其中每个项目都有一个 bool 值，表示用户是否可以根据其访问权限看到该项目。由于我无法在一个元素上放置两个结构指令，因此我决定对 ngFor 使用 ng-container，然后将 ngIf 放置在组件上.

这是主要的侧面导航组件，显示侧面导航项目列表。

@Component({
  selector: 'side-nav',
  template: '<ng-content select="side-nav-item"></ng-content>'
})
export class SideNav { }

这是一个示例侧导航项(为此目的，除了显示 h2 之外什么也不做):

@Component({
  selector: 'side-nav-item',
  template: '<h2>Side Nav Item</h2>'
})
export class SideNavItem { }

这利用了上述两个组件

@Component({
  selector: 'main-nav',
  template: `
    <side-nav>
      <ng-container *ngFor="let item of sideNavItems">
        <side-nav-item *ngIf="item.hasAccess"></side-nav-item>
      </ng-container>
    </side-nav>

    <side-nav>
      <side-nav-item *ngFor="let item of sideNavItems"></side-nav-item>
    </side-nav>
  `
})
export class MainNav {
  sideNavItems: ISidNavItem[] = [
    {
      hasAccess: true, uri: '/dashboard'
    }
  ]
}

在此StackBlitz我希望看到打印两个组件，但我只得到最后一个，因为它不在 ng-container 内部。如何使用 ngFor 和 ngIf 使其正常工作？

Answer 1

您可以在 MainNav 模板中使用 ngProjectAs。

@Component({
  selector: 'main-nav',
  template: `
    <side-nav>
      <ng-container *ngFor="let item of sideNavItems" ngProjectAs="side-nav-item">
        <side-nav-item *ngIf="item.hasAccess"></side-nav-item>
      </ng-container>
    </side-nav>

    <side-nav>
      <side-nav-item *ngFor="let item of sideNavItems"></side-nav-item>
    </side-nav>
  `
})
export class MainNav {
  sideNavItems: ISidNavItem[] = [
    {
      hasAccess: true, uri: '/dashboard'
    }
  ]
}

这样，ng-content 的 select 会将 ng-container 读取为 side-nav-item.