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

Question

当我的组件在ng-container时，我没有显示它们。 我有一个我正在循环的项目数组，其中每个项目都有一个 boolean 值，即用户是否可以根据他们的访问权限看到该项目。 由于我不能在一个元素上放置两个结构指令，我决定为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 。