Как убрать модал-открытый класс в Angular по новой ссылке? - PullRequest
Новая
       18

Как убрать модал-открытый класс в Angular по новой ссылке?

0 голосов
/ 10 апреля 2020

У меня есть модал bootstrap, в котором при нажатии на кнопку есть кнопка, по которой компонент (где присутствует модал) направляется к другому компоненту (вопросы). Проблема возникает, когда новый компонент загружен, класс modal-open все еще остается в теге body. Есть ли способ удалить modal-body? Также, если я вернусь на предыдущую страницу, класс все еще останется там.

модальный код 

<input type="submit" value="Submit" class="btn login-btn" [disabled]="profileForm.invalid" data-toggle="modal" data-target="#instructions">
<div class="modal fade" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">Instructions</h5>
            </div>
            <div class="modal-body">
                content written here
                <form action="">
                    <div class="form-row align-items-center">
                        <div class="col-auto my-1">
                            <div class="custom-control custom-checkbox mr-sm-2">
                                <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
                                <label class="custom-control-label" for="customControlAutosizing">
                                    To start, click the "Start" button. When finished, click the "Submit Quiz" button.
                                </label>
                            </div>
                        </div>
                        <div class="col-auto my-1">
                            <button type="submit" class="btn btn-primary" [routerLink]="['/questions']">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Я написал это css, чтобы переопределить основной css но не сработало: 

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, -25%);
    -ms-transform: translate(0, -25%);
    transform: translate(0, -25%);
  }

Также я пытался удалить класс fade из modal div.

1 Ответ

0 голосов
/ 10 апреля 2020

in css put 

.hide{
  display:none !important;
}

В вашем модальном параметре чтения прочитайте 

<div class="modal fade {{display}}" id="instructions" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

, затем дайте событие нажатия вашей кнопке 

<button type="submit" class="btn btn-primary"(click)="goToQuestion()">Submit</button>

и в компонент импорта маршрутизатора 

import { Router } from '@angular/router';

в costrunctor установите маршрутизатор и создайте параметр отображения 

display="";

constructor(private _router: Router) { }

, а затем напишите функцию 

goToQuestion(){
   //here dismiss modal first then route
    this.display="none";
    this._router.navigate(['questions']);
}
...