Javascript 角度-是否有方法检查事件绑定的唯一属性？

我正在尝试构建一个功能，当我点击一个标题时，图标上的样式会改变，并显示额外的HTML。我的工作代码如下：

组成部分

模板HTML

---

提前谢谢

我找到了一个解决方案，我在头中添加了一个id属性，并在我的事件绑定中传递了$event。已使用$event的srcElement.id进行检查。看起来像：

模板HTML

---

如果您在多个组件中需要相同的功能，那么您应该使用一个服务，并将该服务注入到需要该服务的组件中functionality@messerbill我了解服务，但不确定它是否适用于这种情况，因为在这个组件之外不需要它。我想我的问题可能不够清楚。我试图在几个地方重复使用功能，这些地方都是同一个组件的一部分。在本例中，我的页面上有多张卡片，每个卡片都有一个类似“阅读更多”的部分，当单击时会展开该部分。是否制作一个对象，其中每个属性都是不同类型的，其值为true或false work？它将允许您执行obj[turnType]来获取/设置值。您已经拥有了已单击元素的上下文，毕竟为什么需要$event？@ABOS感谢您的评论。您会建议我如何向checkIfTurned方法提供单击元素的上下文？

export class ServicesComponent {
    interpretingTurned: Boolean = false;
    communityDevelopmentTurned: Boolean = false;
    instructingTurned: Boolean = false;

    checkIfTurned(turned) {
        if (!turned) {
            turned = true;
            this.interpretingTurned = turned; 
        } else {
            turned = false;
            this.interpretingTurned = turned;
        }
}

<div class="optional" fxLayout="row">
    <h6 class="optional-header" #interpretingHeader (click)="checkIfTurned(interpretingTurned)">Optional services</h6>
    <i class="fas fa-arrow-circle-right" *ngIf="!interpretingTurned"></i>
    <i class="fas fa-arrow-circle-down" *ngIf="interpretingTurned"></i>
</div>
<div class="optional-section " *ngIf="interpretingTurned">
    <ul>
        <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit </li>
        <li>Sit vero recusandae minus quidem laudantium assumenda? Nostrum, error debitis</li>
        <li>Assumenda aliquid maxime dolorum quisquam sed? Officiis autem nisi soluta consectetur itaque?</li>
     </ul>
</div>

export class ServicesComponent {
    interpretingTurned: Boolean = false;
    communityDevelopmentTurned: Boolean = false;
    instructingTurned: Boolean = false;

    checkIfTurned(turned) {
        if(some unique property related to event indicating it's from the Interpeting Header){ 
            if (!turned) {
                turned = true;
                this.interpretingTurned = turned; 
            } else {
                turned = false;
                this.interpretingTurned = turned;
            }
        }
        if(some unique property related to event indicating it's from the Community Development Header){ 
            if (!turned) {
                turned = true;
                this.communityDevelopmentTurned = turned; 
            } else {
                turned = false;
                this.communityDevelopmentTurned = turned;
            }
        }
        ...
    }
}

div class="optional" fxLayout="row">
    <h6 class="optional-header" id="optional-header-interpreting" #interpretingHeader (click)="checkIfTurned(interpretingTurned, $event)">Optional services</h6>
    <i class="fas fa-arrow-circle-right" id="optional-header-interpreting" (click)="checkIfTurned(interpretingTurned, $event)" *ngIf="!interpretingTurned"></i>
    <i class="fas fa-arrow-circle-down" id="optional-header-interpreting" (click)="checkIfTurned(interpretingTurned, $event)" *ngIf="interpretingTurned"></i>
</div>
...

 checkIfTurned(turned, event) {
        if (event.srcElement.id === "optional-header-interpreting"){
        ...
        } 
        if (event.srcElement.id === "optional-header-comm-dev"){
        ...
        }