Javascript 如何将ng内容与ng容器一起使用？

当组件位于

ng容器中时，我无法显示它们。我有一个循环的项目数组，其中每个项目都有一个布尔值，即用户是否可以根据其访问权限查看该项目。因为我不能在一个元素上放置两个结构指令，所以我决定对
ngFor
使用
ng容器
，然后将
ngIf
放置在组件上

这是主侧导航组件，显示侧导航项目列表

@组件({
选择器：“侧导航”，
模板：“”
})
导出类SideNav{}

这是一个示例侧导航项目（为此，除了显示h2外，它什么也不做）：

@组件({
选择器：'侧导航项目'，
模板：“侧导航项目”
})
导出类SideNaviItem{}

这利用了上述两个组件

@组件({
选择器：“主导航”，
模板：`
`
})
导出类主导航{
sideNavItems:ISidNavItem[]=[
{
hasAccess:true，uri:“/dashboard”
}
]
}

在本文中，我希望看到打印两个组件，但我只得到最后一个组件，因为它不在
ng容器中。使用此
ngFor
和
ngIf
如何使此工作正常？
您可以在
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'
    }
  ]
}

@组件({
选择器：“主导航”，
模板：`
`
})
导出类主导航{
sideNavItems:ISidNavItem[]=[
{
hasAccess:true，uri:“/dashboard”
}
]
}

通过这种方式，
ng内容的
select
将
ng容器
作为
侧导航项
了解更多关于ngProjectAs的有用性：我以前从未使用过，谢谢！