html - 如何在Angular 7中加载页面后触发引导模式弹出窗口
问题描述
我正在尝试实现一个功能,当用户访问登录页面并在登录页面上停留超过 15 秒时,模式会在大约 15 秒后加载。但是视图加载后什么都没有加载
HTML:
<button [hidden]="true" data-toggle="modal" data-target="#myModal"></button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
组件.ts 文件
import { Component, OnInit, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, AfterViewInit {
@ViewChild('myModal') myModal:ElementRef;
constructor() { }
ngOnInit() { }
ngAfterViewInit () {
setTimeout(() =>{
this.myModal.nativeElement.click();;
}, 15000)
}
}
解决方案
您的代码运行完美,您只是忘记向#myModal
按钮添加引用变量。
例子 :
<button #myModal [hidden]="true" data-toggle="modal" data-target="#myModal"></button>
StackBlitz 示例:
https://stackblitz.com/edit/angular-open-modal-afterviewinit-5s
推荐阅读
- oracle11g - 在 MSSQL 中使用 Oracle 表
- docker - 作为环境变量传递的 Docker 机密
- augmented-reality - ARCore 也能识别文档吗?
- go - 得到错误我使用 'git config — global — unset https.proxy' 来消除错误,但它不起作用
- javascript - 如何运行 React 原生程序
- python-3.x - 无法通过 Google Analytics Reporting API v4 Python 客户端访问自定义维度和指标
- excel - Office Ribbon 大小图像
- c++ - How to change multiple cursors system-wide in Windows API
- com - 释放COM接口的正确方法
- javascript - 页面重定向后如何打开jquery ui模式