样式在组件中无法正常工作？

Question

我正在尝试使用 :host 属性将 css 应用于 app.component.ts，但它没有被应用。 已应用 Css，但方式不正确

.ts

export class AppComponent  {
  title = "Default Title"
  data = 'This is default data'

  @HostListener('mouseover') displayMessage(){
    this.title = "Updated Title"
    this.data = 'This is updated data'
  }
  @HostListener('mouseout') displayMessage2(){
    this.title = "Default Title"
    this.data = 'This is default data'
  }
}

.html

<div class="card card-block">
  <h4 class="card-title">{{title}}</h4>
  <p class="card-text">
    {{data}}
  </p>
</div>

.css

:host {
  background-color: red;
  border : 1px solid black;
}

链接

https://stackblitz.com/edit/angular-hzu2zm?embed=1&file=src/app/app.component.css

Answer 1

我不完全确定您到底想要完成什么（问题有点含糊）。据我了解，您对背景颜色不适用感到沮丧。如果是这样，要解决此问题，请将其添加到 :host

display: block;

Answer 2

在 CSS 文件中将 :host 更改为 .card-text 或 .card card-block。