请检查以下代码:
https://stackblitz.com/edit/angular-nuyfcq
我希望在选择一个文件时,会出现一个小的缩略图,上面有一个X
符号。我只用HTML,CSS和JS就能让它工作(见https://codepen.io/manuchadha/pen/PBKYBJ),但我不能让它在Angular中工作。
我的错误在哪里?
发布于 2018-08-04 03:10:00
受到答案https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling
的启发,如果我将我所有的类都改为:host >>> selector
格式,那么它就可以工作了。我从类更改为选择器(例如,通过给a
(a#close-button
)一个id将close-cross-link
改为选择器)
:host >>> a#close-button /*.close-cross-link*/ {
border: 1px solid black;
width: 100px;
height: 100px;
opacity: 0.3;
background-color:white;
position:relative;
top:-15px;
left:-15px;
/*border-radius:50%; /*makes a circle*/
}
:host >>> a#close-button:hover /*.close-cross-link:hover */{
opacity: 1;
}
:host >>> a#close-button:before, :host >>> a#close-button:after /*.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*/
}
:host >>> a#close-button:before /*.close-cross-link:before */{
transform: rotate(45deg);
}
:host >>> a#close-button:after /*.close-cross-link:after*/ {
transform: rotate(-45deg);
}
https://stackoverflow.com/questions/51675838
复制相似问题