0

我正在尝试将引导程序中的模态添加到我的代码中，并且我将 Angular2+（完全是 6）用于前端部分。问题是我用来调用模态的按钮位于模态本身之外的另一个组件中，因此它无法按预期工作。

在一个组件中，侧边栏之一，我有这些代码行：

<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 连接器”按钮时，它不会打开我的模态，而且我不知道如何使它工作。

我希望我的问题很清楚，并且您将能够帮助我。谢谢 ！

4

1 回答 1

0

您需要将组件选择器添加到您的按钮所在的 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
于 2019-07-11T02:35:15.240 回答