Angular6 无法在Angular中使用CSS创建关闭按钮

请检查以下代码：

我希望在选择一个文件时，会显示一个小缩略图，上面有一个

X

符号。我只使用了HTML、CSS和JS（请参阅），但我无法使它在Angular中工作

---

我的错误在哪里？

受答案启发

https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling

，如果我将所有类更改为格式

：host>>selector

，也就是说（注释部分是我之前使用的。我从类更改了（例如，

通过给
a
（
a#close按钮
）一个id来关闭交叉链接

）

---

你可以在javascript中做的任何事情你都可以在angularI中做，我同意，但我无法找出angularI版本中的错误是什么，似乎你无法应用cssI同意。

closeButtonLink.classList.add（“close cross link”）；

似乎不起作用。虽然如果你检查元素，会添加

close cross link

（

但我看不到

:before

和

：before

和

:before

。不可能应用css吗？为什么关闭锚被注释掉了？

: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);
}