这是我的.ts文件中的一个函数，只要我从<input type="file">元素中选择一个文件，该函数就会被调用。它读取文件，将其编码为base64，并在input元素正下方显示一个缩略图
_handleReaderLoaded(fileReaderEvt) {
let binaryString = fileReaderEvt.target.result;
this.base64textString= btoa(binaryString);
console.log(this.base64textString);
/*show image as thumbnail*/
let src = "data:image/png;base64,";
src += this.base64textString;
let newImage = document.createElement('img');
newImage.src = src;
newImage.height = 80;
//document.querySelector('#image-thumbnail-container').innerHTML = newImage.outerHTML;
var closeButtonLink = document.createElement('a');
closeButtonLink.setAttribute('href',"#");
closeButtonLink.classList.add("close-cross-link");
document.querySelector('#image-thumbnail-container').appendChild(newImage);
document.querySelector('#image-thumbnail-container').appendChild(closeButtonLink);
}
在缩略图上，我想显示一个X按钮，该按钮可用于删除缩略图。我已经使用html，css和js（请参见https://codepen.io/manuchadha/pen/PBKYBJ）来工作，但是我无法使其在Angular中工作。我怀疑closeButtonLink.classList.add("close-cross-link");不能正常工作，因为我没有在浏览器的调试工具中看到与<a>关联的：before和：after类。
创建css的{{1}}是
X错误在哪里？我需要使用#image-thumbnail-container{
position:relative; /*give this element position so that the cross could be placed using absolute relative to this*/
display:inline-block;
margin:5px;
/*border: 3px solid black;*/
}
.close-cross-link {
border: 1px solid black;
width: 32px;
height: 32px;
opacity: 0.3;
background-color:white;
position:relative;
top:-15px;
left:-15px;
border-radius:50%; /*makes a circle*/
}
.close-cross-link:hover {
opacity: 1;
}
.close-cross-link:before, .close-cross-link:after {
display:inline-block;/*need display+relative+left or absolute+left*/
position:relative;
left: 13px;
border: 1px solid black;
top:0px;
right:0px;
content: '';
height: 31px;
width: 2px;
background-color: #333;
border-radius:50%; /*makes cross sharper*/
}
.close-cross-link:before {
transform: rotate(45deg);
}
.close-cross-link:after {
transform: rotate(-45deg);
}
来操纵ElementRef吗？