Как использовать data-target в разных компонентах? - PullRequest
1 голос
/ 01 апреля 2019

Я пытаюсь добавить модал из начальной загрузки в мой код, и я использую Angular2 + (6 точно) для передней части.Проблема в том, что кнопка, которую я использую для вызова модального режима, находится в другом компоненте, чем сам модальный, поэтому она не работает должным образом.

В одном компоненте, Siderbar, у меня есть эти строки кода:

<li *ngIf="!userService.mainUser" data-toggle="modal" data-target="#login"  style="cursor: pointer">
    <a>
        <i class="mdi mdi-login"></i>
        <span class="hide-menu">Se connecter</span>
    </a>
</li>

Как вы можете видеть, у меня есть data-toggle="modal" и data-target="#login" в моем <li>, чтобы открыть мой мод, когда я нажимаю.

Проблема в том, что моймодальный код находится в другом компоненте, логин:

<div id="login" class="modal fade" role="dialog">
  <div class="modal-dialog modal-dialog-centered">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-title">
        <h1 style="margin-left: 15px">Se connecter</h1>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="form-control-label">Nom d'utilisateur</label>
          <input name="username" class="form-control" placeholder="Nom d'utilisateur">
        </div>

        <div class="form-group">
          <label class="form-control-label">Mot de passe</label>
          <input name="password" class="form-control" placeholder="Mot de passe">
        </div>
        <div>
          <input style="display: inline" type="checkbox">
          <label style="margin-left: 10px"> Rester connecté ?</label>
        </div>

        <button (click)="logIn()" [ngStyle]="{'background': appFade, 'color': getTextColor()}">Se connecter</button>

      </div>
    </div>

  </div>
</div>

Поэтому, когда я нажимаю кнопку «Se connectc», он не открывает мой модал, и я не знаю, как это сделатьработает.

Надеюсь, мой вопрос ясен и вы сможете мне помочь.Спасибо!

1 Ответ

0 голосов
/ 11 июля 2019

Вам необходимо добавить селектор компонентов в HTML, где ваша кнопка

    <li *ngIf="!userService.mainUser" data-toggle="modal" data-target="#login"  style="cursor: pointer">
    <a>
        <i class="mdi mdi-login"></i>
        <span class="hide-menu">Se connecter</span>
    </a>
</li>
<app-login-modal></app-login-modal>//this should coincide with the name modals selector name in your typescript file
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...