在页面加载角度为2时打开引导程序模态 [英] Open bootstrap modal on page load angular 2
问题描述
我正在研究angular2项目，我有2个组件，即:home和first.
I am working on an angular2 project and I have 2 components namely: home and first.
我的 home.component.html 如下:-
<div class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="../" class="navbar-brand">Angular 2</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a routerLink="Home">Home</a>
</li>
<li>
<a routerLink="First">First</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" data-toggle="modal" data-target="#login-modal" (click)="myFunc()">Login</a></li>
</ul>
</div>
</div>
</div>
<div class = "container">
<router-outlet></router-outlet>
</div>
<!-- Modal -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="loginmodal-container">
<h1>Login to Your Account</h1><br>
<form>
<input type="text" name="user" placeholder="Username">
<input type="password" name="pass" placeholder="Password">
<input type="submit" name="login" class="login loginmodal-submit" value="Login">
</form>
<div class="login-help">
<a href="#">Register</a> - <a href="#">Forgot Password</a>
</div>
</div>
</div>
</div>
我想做的是:
无论何时用户打开网站，登录方式都应首先显示.如果用户未登录，则单击任何链接(首页"，第一"或登录")应打开登录模式.
Whenever the user opens the website, the login-modal should show first. If the user is not logged-in, clicking on any link (Home,First or Login) should open the login-modal.
我的问题是，即使我单击登录"链接，也无法打开登录模式.以下是我的 app.component.ts
My problem is that I am not able to open the login modal, even when I click the "Login" link. Below is the content of my app.component.ts
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
title = 'app works!';
ngOnInit(){
alert("Loaded");
}
myFunc(){
$("#login-modal").modal('show');
}
}
我能够收到警报，但不能收到模态警报.
I am able to get the alert but not the modal.
请帮助.
更新-添加我的index.html
UPDATE - adding my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ClientApp</title>
<base href="/">
<link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
有了这个，我可以看到模态，但是它立即显示并消失.
With this I can see the modal but it show and disappears immediately.
推荐答案
要在用户首次访问组件时显示模式:
To make the modal display upon user first visiting the component:
组件的TS文件:
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
@ViewChild('openModal') openModal:ElementRef;
title = 'app works!';
ngOnInit(){
this.openModal.nativeElement.click();
}
组件的HTML文件:
<button id="openModal" #openModal [hidden]="true"
data-toggle="modal" data-target="#login-modal"></button>
这将在用户首次访问页面时打开模式.您将拥有一个用户看不见的幻影按钮，但将通过使用this.openModal.nativeElement.click()激活.使用这种方法打开模态的可能性很大.
This will open the modal upon the user first visiting the page. You'll have a ghost button that the user can not see, but will be activated by using this.openModal.nativeElement.click(). Lots of possiblities using this method to open the modal.
要在用户单击登录按钮时打开相同的模式:
To open the same modal when the user clicks the login button:
HTML:
<li><a href="#" data-toggle="modal" data-target="#login-modal"
(click)="myFunc()">Login</a></li>
TS:
myFunc(){
this.openModal.nativeElement.click();
}
这可能不是最优雅的解决方案，但是它确实可以工作，我经常使用它.
This may not be the most elegant solution, but it definitely works and I use it quite often.
这篇关于在页面加载角度为2时打开引导程序模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
