Angular 19 中如何将 PrimeNG p-tablist 与标题对齐？

结论

在 frame-container 上使用 <ng-content select="[frame-header]"></ng-content>，无法把嵌套在 <p-tabs> 中的 <p-tablist> 或 <p-tab> 移到标题区域。Angular 内容投影只会匹配传给组件的内容节点，不会递归查找子组件内部的节点，再将它们放到祖先模板的其他位置。

在你的示例中，<p-tabs> 是传给 frame-container 的内容节点，<p-tablist> 则属于 <p-tabs> 的内容。因此，即使给 <p-tablist> 添加 frame-header 属性，外层的 frame-container 也无法选中它。

为什么选择器没有生效

原有结构大致如下：

<frame-container>
  <p-tabs>
    <p-tablist frame-header>
      ...
    </p-tablist>
    <p-tabpanels>
      ...
    </p-tabpanels>
  </p-tabs>
</frame-container>

frame-container 接收到的根内容节点是 <p-tabs>。<p-tablist> 在它内部，属于 p-tabs 的内容。<ng-content select> 不会越过 <p-tabs> 匹配内部节点，也不会把节点从原有的父子结构中移出来。

可选的组件结构

如果希望由 frame-container 控制标题区和标签区的布局，可以调整组件 API：由 frame-container 创建 <p-tabs>、<p-tablist> 和 <p-tabpanels>，调用方则直接提供 tab 和 panel 内容。例如：

<frame-container header="Header">
  <p-tab value="tab1" frameTab>
    <span>Tab label 1</span>
  </p-tab>
  <p-tab value="tab2" frameTab>
    <span>Tab label 2</span>
  </p-tab>

  <p-tabpanel value="tab1" framePanel>
    <child-component-1></child-component-1>
  </p-tabpanel>
  <p-tabpanel value="tab2" framePanel>
    <child-component-2></child-component-2>
  </p-tabpanel>
</frame-container>

然后在组件模板中，按照 PrimeNG Tabs 所需的层级放置这些投影内容：

<p-tabs>
  <p-tablist>
    <ng-content select="p-tab[frameTab]"></ng-content>
  </p-tablist>
  <p-tabpanels>
    <ng-content select="p-tabpanel[framePanel]"></ng-content>
  </p-tabpanels>
</p-tabs>

这样会改变调用方提供内容的结构，并让 frame-container 决定 tabs 的整体组织方式。实现前需要确认 PrimeNG 19.1 的 p-tabs、p-tablist 和 p-tabpanels 能否按这种投影结构识别子组件。如果它们要求特定的直接父子关系，就需要根据组件 API 调整模板结构。

标题需要和 tablist 显示在同一行。如果 PrimeNG 组件没有提供标题插槽，组件就需要提供一个能同时容纳标题和 tablist 的布局位置。内容投影不会自动对齐它们，也不能代替布局设置。

继续使用现有 <p-tabs> 结构

如果不想改变 PrimeNG Tabs 的层级，可以让整个 <p-tabs> 留在 frame-container 的内容区，并在这一层处理标题与标签栏的布局。此时应保留 <p-tablist> 在原有结构中；外层只能投影它实际接收到的内容节点。

采用哪种结构，取决于 frame-container 是否可以接管 Tabs 模板，以及 PrimeNG 对其子组件层级的要求。

备注：内容仅供参考。