我正在做一个 angular2 项目，我有 2 个组件，即:home 和 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>
我想做的是:
每当用户打开网站时，登录模式应该首先显示。如果用户未登录，单击任何链接(主页、首先或登录)应打开登录模式。
我的问题是我无法打开登录模式，即使单击“登录”链接也是如此。下面是我的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');
}
}
我能够收到警报但不能收到模态。
请帮忙。
更新 - 添加我的 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>
有了这个，我可以看到模态，但它会立即显示并消失。
最佳答案
在用户第一次访问组件时进行模态显示:
组件的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() 激活。使用此方法打开模式的可能性很大。
当用户点击登录按钮时打开相同的模式:
HTML:
<li><a href="#" data-toggle="modal" data-target="#login-modal"
(click)="myFunc()">Login</a></li>
TS:
myFunc(){
this.openModal.nativeElement.click();
}
这可能不是最优雅的解决方案，但它确实有效并且我经常使用它。
关于angular - 在页面加载 Angular 2 上打开引导模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44209691/