Question

我使用mdbModal创建了一个模态，在模态中有4个图标，如下图所示。

当我单击每个图标时，我想改变圆圈的背景颜色和图标的边框颜色。这是我的模式代码：

<div mdbModal #addSocialModal="mdbModal" class="modal fade top" id="addSocialModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true">

  <div class="modal-dialog modal-dialog-centered" style="justify-content: center; max-width: 100%"
       role="document">
    <div class="modal-content addSocialModal-size modal-lg"
         style="text-align: center">


      <form [formGroup]="createProjectForm" (ngSubmit)="onAddSocial()">

        <div class="modal-body mx-3 d-rtl" style="margin-top: 50px;margin-bottom: 10px">

          <a class="socialProject icon-instagram" id="instagramm" #instagramm
             (click)="onClickSocial('instagram')"
             style="border: 1px solid #b913bd"></a>
          <a class="socialProject icon-telegram" id="telegram"
             (click)="onClickSocial('telegram')"
             style="border: 1px solid #19b4ff"></a>
          <a class="socialProject icon-linkedin" id="linkedin"
             (click)="onClickSocial('linkedin')"
             style="border: 1px solid #004a73"></a>
          <a class="socialProject icon-twitter" id="twitter"
             (click)="onClickSocial('twitter')"
             style="border: 1px solid #95d8fe"></a>

        </div>

        <li class="create-project-btn-position d-rtl">

          <button class="btn cancel-btn" (click)="addSocialModal.hide()">
            لغو
          </button>
          <button [disabled]="!createProjectForm.valid" type="submit" class="btn create-project-btn">
            اتصال اکانت
          </button>

        </li>

      </form>
    </div>
  </div>
</div>

这是onClickSocial方法的我的component.ts代码：

onClickSocial(social) {

    if (social === 'instagram') {

      document.getElementById('instagramm').style.backgroundColor = 'red';
    }
    }

但是它不起作用。当我测试此代码而不是模态代码时，它可以工作，但在模态代码中却不起作用。

我该如何解决此问题？

Answer 1

尝试使用[ngClass]根据条件应用CSS类-

-组件代码-

social: string;

onClickSocial(value) {
    this.social = value;
}

-HTML代码-

<a (click)="onClickSocial('instagram')" [ngClass]="{'active': social == 'instagram'}"></a>

-CSS代码-

.active {
  // style code
}

单击模式中的图标时如何更改元素的样式？

1 个答案: