[英]How to use data-target into differents components?
我試圖將引導程序中的模式添加到我的代碼中,並且前端部分使用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>
如您所見,當我單擊時,我的<li>
有一個data-toggle="modal"
和data-target="#login"
以打開我的模態。
問題是我的模態代碼進入了另一個組件,即Login組件:
<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連接器”按鈕時,它不會打開我的模態,並且我不知道如何使其工作。
我希望我的問題很清楚,希望您能為我提供幫助。 謝謝 !
您需要將組件選擇器添加到按鈕所在的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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.