我能否以 `myDirective('p')` 的形式创建一个 Angular 结构指令，将值从 HMTL 视图传递给指令？

Question

我正在制作一个 HTML 视图模板，其中每个按钮对应国际音标 (IPA) 的 28 个元音字母和 59 个辅音字母。每个按钮看起来像这样：

<button [ngStyle]="style_p()" (click)='phonemeClick("p")' mat-raised-button
        *ngIf="ipaView || language2.short==='en' || language2.short==='es' || language2.short==='zh' || language2.short==='fi' || language2.short==='ipa'"
        [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltipMessage" [matTooltipDisabled]="tooltipDisabled">
        p {{exampleWords.p}}
        <span (click)='playAudio("p")'><mat-icon appHeadphonesIcon aria-hidden="false"
                aria-label="Headphones icon">headphones</mat-icon></span>
</button>

我可以复制并粘贴那个丑陋的 HTML 块 87 次，每次键入另一个字母五次以替换出现的五次

p

。我可以做一个看起来像

的结构指令吗

<button myDirective('p')></button>

我看到了如何制作一个结构指令，该指令根据组件中值的变化来更改 DOM 中的元素，包括当用户单击按钮或提交表单时来自 HTML 视图的值。我不知道如何使用 HTML 模板中设置的值来执行此操作。

我无法使用

p

将

ngClick

传递给指令，因为这需要等待用户单击按钮。该指令需要在用户单击按钮之前设置按钮的样式。

我不能使用

ngModel

因为按钮不是表单。

如何将

p

从 HTML 视图传递到指令？

五个p：

• 设置按钮的样式（颜色、背景、边框半径等）
• 单击时，按钮会触发

  phonemeClick()

  处理程序函数并将

  p

  作为参数传递
• 向用户显示

  p

• 显示组件

  exampleWords.p

• 当用户单击

  headphones

  图标（在按钮中）时，

  playMe()

  处理函数播放音频文件（通过

  p

  作为参数