如何删除主机组件标签表单html

Question

我的组件是app-menu，它是一个递归组件，它的第一个标签是li。另一方面，我有一个 css 可以更改 <div> 内的任何 li 的字体，但它在我的 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 {...}。