我想在单击模态中的元素时调用一个方法。我以前在一个项目中使用过js/jquery，但现在我正在使用angular重写这个项目。
这里有一个js/jquery脚本，对我来说很好
<!Doctype html>
<html lang ="en">
<head>
<meta charset ="utf-8" />
<title>Popup Modal</title>
<style>
.wrap {
position: absolute;
top: 10%;
right: 10%;
bottom: 85px;
left: 10%;
padding: 20px 50px;
display: block;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
background: green;
}
.wrap.active {
display: block;
visibility: visible;
box-shadow: 2px 3px 16px silver;
transition: all 600ms;
transform: translateY(0px);
transition: all 0.5s;
}
.wrap.active .content {
position: relative;
z-index: 1;
opacity: 1;
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
</style>
<script src ="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
function showModal(selector){
$('#modal_content').html($(selector).show());
$('.wrap').show().toggleClass('active');
return false;
}
function showAlert(msg){
alert(msg);
}
$(function (){
$('#say-hi').on('click', ()=>{
showAlert('Hello guys');
})
})
</script>
</head>
<body>
<p id="paragraph" style="display: none;">
This is a paragraph that I want to show inside modal<br /><br />
<button id="say-hi">Click to get alert</button>
</p>
<div class='wrap screen_center' style="display: none;">
<div id ="modal_content" class='content'>
content
</div>
</div>
<a onclick="showModal('#paragraph');">Click me</a>
</body>
</html>
上面的js/jquery运行良好。以下是角度版本
这是ts文件
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('modal_wrapper') modalWrapper;
@ViewChild('modal_content') modalContent;
@ViewChild('paragraph') paragraph;
showInModal: boolean = false;
constructor(){}
showModal(contentSelector){
const modalEl = this.modalWrapper.nativeElement;
const modalContentEl = this.modalContent.nativeElement;
const paragraphEl = this.paragraph.nativeElement;
modalContentEl.innerHTML = paragraphEl.outerHTML;
console.log('modal wrapper: ', this.modalWrapper, 'modal content: ', this.modalContent, 'paragraph: ', this.paragraph);
modalEl.classList.toggle('active');
}
showAlert(msg){
alert(msg);
}
}
这是.html文件
<button (click)="showModal('#paragraph');" >Open Modal</button>
<div #paragraph>
<p>
This is a paragraph that I want to show inside modal<br /><br />
<button (click)="showAlert('Hello guys');">Click to get alert</button>
</p>
</div>
<div #modal_wrapper class='modal centered top' >
<div #modal_content class="modal_content">
content
</div>
</div>
最后是.css文件
.modal {
position: absolute;
overflow: hidden;
top: 70px;
bottom: 85px;
padding: 10px 25px;
display: block;
border-radius: 4px;
transform: translateY(20px);
transition: all 0.5s;
visibility: hidden;
background: ghostwhite;
width: 95%;
min-height: 70%;
}
.modal .modal_content {
opacity: 0;
overflow-y: scroll;
max-height: 90%;
}
.modal.active {
display: block;
visibility: visible;
box-shadow: 2px 3px 16px silver;
transition: all 600ms;
transform: translateY(0px);
transition: all 0.5s;
}
.modal.active .modal_content {
position: relative;
z-index: 1;
opacity: 1;
transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
}
.top{
z-index: 99 !important;
}
.modal{
width: 60%;
margin-left: -30%;
}
我对棱角分明很陌生，我真的不知道自己做错了什么。任何有主意的人都应该帮我。感谢adv
我在stackblitz上创建了它https://stackblitz.com/edit/angular-ivy-feuvem"；点击以获得警报"；按钮没有发出警报，这就是问题所在。我已经编辑了stackblitz url，这样你就可以查看代码
我认为这里的问题是，您试图将HTML放入一些HTML中，并希望它的脚本部分能够正常工作(即包含单击功能(。
乍一看，这个问题似乎涵盖了你想做的事情