css - 如何从 html 中删除主机组件标签

Question

我的组件是app-menu这是一个递归组件，它的第一个标签是 li .另一方面，我有一个 css 可以更改任何 li 的字体。那是里面 <div>但它在我的 html 中不起作用因为我的li由 <app-menu> 包裹.那我该怎么办？如何使用 <app-menu>以及我的 CSS？

我的 html:

<div>
     <app-menu [catList]="catList"></app-menu>
</div>

我的应用菜单:

<li *ngFor="let cat of subCat()">
  <a href="#">{{cat.title}}</a>
.....
</li>

呈现后我的 html:

<div>
<app-menu>
<li>
      <a href="#">....</a>
    .....
</li>
</app-menu>
</div>

Answer 1

你必须指定 li 的整个路径，或者你需要将它放在通用的 style.(s)css 文件中。

在 Angular 中，组件有自己的样式，因此您在其中所做的任何更改都只会应用到它。

为了能够在子组件内的标签中应用样式，您必须提供完整路径。

我认为你的 css 选择器应该是 div app-menu li {...} .

如果不行，尝试在<app-menu>中加入一个类喜欢<app-menu class="my-menu" [catList]="catList"></app-menu>并使用该类找到 li .就是这个 div .my-menu li {...} .