[英]How to use data-target into differents components?
I'm trying to add a modal from bootstrap into my code and I'm using Angular2+ (6 exactly) for the front-end part. 我试图将引导程序中的模式添加到我的代码中,并且前端部分使用Angular2 +(正好是6个)。 The problem is that the button I use to call the modal is into another component than the modal itself, so it doesn't work as expected.
问题在于,我用来调用模式的按钮位于模式本身之外的另一个组件中,因此它无法按预期工作。
In one component, the Siderbar one, i have those lines of code: 在一个组件(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>
As you can see, I have a data-toggle="modal"
and a data-target="#login"
in my <li>
to open my modal when I click. 如您所见,当我单击时,我的
<li>
有一个data-toggle="modal"
和data-target="#login"
以打开我的模态。
The problem is that my modal's code is into another component, the Login one: 问题是我的模态代码进入了另一个组件,即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>
So when I click on the "Se connecter" button, it doesn't open my modal, and I don't know how to make it works. 因此,当我单击“ Se连接器”按钮时,它不会打开我的模态,并且我不知道如何使其工作。
I hope my question is clear and that you will be able to help me. 我希望我的问题很清楚,希望您能为我提供帮助。 Thanks !
谢谢 !
You need to add the component selector to the html where your button is 您需要将组件选择器添加到按钮所在的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.