Question

我正在尝试构建功能，当我单击标题时，图标的样式会更改，并显示其他HTML。我的工作代码如下：

组件

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;
        }
}

模板（HTML）

<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>

我希望在同一组件中的多个位置具有此功能，并且想知道如何只能调用checkIfTurned（），这样我就不必在使用它的其他任何地方重复该功能（例如，社区开发），指导）。现在，我仅检查是否单击了 interpreting 标头。

我本以为可能会有一些独特的属性可以检查并传递给checkIfTurned（），但不确定如何做到这一点。

我的构想

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;
            }
        }
        ...
    }
}

谢谢！

Answer 1

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

模板（HTML）

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"){
        ...
        }

Angular-有没有办法检查事件绑定的唯一属性？

1 个答案: