Angular14+PrimeNG中如何让p-header内按钮居右？

直接给你两个可行的方案，都是针对p-header默认布局限制的解决办法：

方案1：用自定义模板+PrimeFlex实现 #

PrimeFlex的布局类需要父容器是flex布局才能生效，而p-panel默认的p-header是block布局，所以直接用<ng-template pTemplate="header">自定义头部内容，把容器改成flex布局：

<p-panel>
  <ng-template pTemplate="header">
    <div class="flex justify-content-between align-items-center w-full">
      <span>你的头部文本</span>
      <div class="flex gap-2">
        <p-button label="按钮1"></p-button>
        <p-button label="按钮2"></p-button>
      </div>
    </div>
  </ng-template>
  <!-- 面板主体内容 -->
</p-panel>

这里flex justify-content-between会让左右元素分别靠两端，align-items-center保证垂直居中，gap-2给按钮之间留间距，完全用PrimeFlex的类就能搞定。

方案2：修改p-header的默认样式 #

如果不想自定义模板，也可以强制修改p-header的布局，利用Angular的样式穿透：

在组件的CSS文件里添加：

:host ::ng-deep .p-panel .p-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

然后模板里正常写p-header内容：

<p-panel>
  <p-header>
    <span>你的头部文本</span>
    <div class="flex gap-2">
      <p-button label="按钮1"></p-button>
      <p-button label="按钮2"></p-button>
    </div>
  </p-header>
  <!-- 面板主体内容 -->
</p-panel>

为啥之前的方法没用？ #

PrimeNG的p-panel-header默认是block布局，float、text-align这些属性在block容器里没法实现左右分布；另外Angular的样式隔离会阻止你的自定义样式直接作用到PrimeNG组件内部，所以需要用::ng-deep或者自定义模板的方式绕开这个限制。

内容的提问来源于stack exchange，提问作者Dean Schulze