button - Primeng - 在选项列表标题中添加按钮

Question

如何在选项列表标题中添加自定义按钮，例如 在这里？我正在尝试在 Primeng 选项列表标题中添加按钮，但它只将字符串作为标题值。有没有办法在自动生成的标题中添加任何模板（HTML）？

 <p-pickList
   sourceHeader="Available" targetHeader="Selected>
</p-pickList>

Answer 1

您可以扩展 p-pickList 并在扩展模板中添加按钮

import { Component, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { PickList, DomHandler } from 'primeng/primeng';
import { ObjectUtils } from 'primeng/components/utils/objectutils';

@Component({
    selector: 'ex-pick-list',
    templateUrl: 'pick-list.component.html',
    styleUrls: ['pick-list.component.scss'],
    encapsulation: ViewEncapsulation.None
})

export class PickListComponent extends PickList {

    constructor(el: ElementRef, domHandler: DomHandler, objectUtils: ObjectUtils) { 
        super(el, domHandler, objectUtils);
    }

}

<div class="pick-list-container">
    <!-- put the original html from the primeng pick list component "moveRight()" now you can use moveRight from PickList -->

        <div class="custom-buttons">
                <button pButton type="button" (click)="moveRight()" class="ui-[label]="''"></button>
            </div>
    </div>
</div>