带有自定义模板参数的PrimeNg OverlayPanel

import { Component } from '@angular/core';
import { OverlayPanel } from 'primeng/overlaypanel';

@Component({
  selector: 'app-overlay-panel-example',
  template: `
    <p-overlayPanel [target]="target" [dismissable]="true">
      <ng-template pTemplate>
        <div class="ui-g">
          <h3>Overlay Panel Content</h3>
          <p>This is a custom content of the overlay panel.</p>
        </div>
      </ng-template>
    </p-overlayPanel>
    <button #target type="button">Click Me</button>
  `,
  styles: [`
    .ui-g {
      text-align: center;
    }
  `]
})
export class OverlayPanelExampleComponent {
  @ViewChild('target') target: any;
}

<p-overlayPanel [target]="target" [dismissable]="true">
  <ng-template pTemplate>
    <div class="ui-g">
      <h3>Overlay Panel Content</h3>
      <p>This is a custom content of the overlay panel.</p>
    </div>
  </ng-template>
</p-overlayPanel>
<button #target type="button">Click Me</button>

.ui-g {
  text-align: center;
}