首页 > 解决方案 > Angular如何检查模态是否打开

问题描述

我正在处理我的 Angular 应用程序的翻译任务并且我正在使用 ngx translate,在检查当前语言是否为阿拉伯语时,我想将模块的文本向右对齐,所以我想检查是否打开了模式我的角度分量,

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-plaintes',
  templateUrl: './plaintes.component.html',
  styleUrls: ['./plaintes.component.css']
})
export class PlaintesComponent implements OnInit {


  constructor(public router: Router, public translate: TranslateService, ) { }

  ngOnInit() {
    alert($('#modal-how').hasClass('in'));
    if (localStorage.getItem('defaultLanguage') === "ar") {
      $('#modal-how').css("text-align", "right")
    }
  }



}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-4">
    <a class="widget widget-12 has-shadow" href="#" data-toggle="modal" data-target="#modal-how">
      <div class="widget-body">
        <div class="media">
          <div class="icon-12">
            <i class="la la-question-circle"></i>
          </div>
          <div class="text-12">
            <div class="title ">{{'plaintes.commentcamarche' | translate}}</div>
          </div>
        </div>
      </div>
    </a>
  </div>
  
  
<div id="modal-how" class="modal fade">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">{{'procedure.mesPlaintes' | translate}}</h4>
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">close</span>
        </button>
      </div>
      <div class="modal-body">
        <p>
          {{'procedure.p1' | translate}} <br>
          <br>
          {{'procedure.p2' | translate}}<br>
          <br>
          {{'procedure.p3' | translate}}
        </p>
        <h4><span class="text-gradient-02">{{'procedure.etape1' | translate}}</span> {{'procedure.Choisirl’emplacement' | translate}}</h4>
        {{'procedure.detailemplacement' | translate}}.<br><br>
        <h4><span class="text-gradient-02">{{'procedure.etape2' | translate}}</span> {{'procedure.Choisirletypedeplainte' | translate}}</h4>
        {{'procedure.detailtypeplainte' | translate}}<br><br>
        <h4><span class="text-gradient-02">{{'procedure.etape3' | translate}}</span> {{'procedure.Attacherdesphotos' | translate}}</h4>
        {{'procedure.detailtypeplainte' | translate}} <br><br>
        <h4><span class="text-gradient-02">{{'procedure.etape4' | translate}}</span> {{'procedure.Validationdesdonnees' | translate}}</h4>
        {{'procedure.detailvalidation' | translate}} <br><br>
        <i class="la la-check-square-o" style="color: green"></i>
        {{'procedure.garantie' | translate}}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">{{'procedure.ok' | translate}}</button>
      </div>
    </div>
  </div>
</div>

我试图提醒模态是否有类('in')但它不起作用!有没有办法检查它是否打开!

标签: javascriptjqueryhtmlangulartwitter-bootstrap

解决方案


推荐阅读