如何从父组件中递归嵌套子组件

Posted 2023-03-06

【中文标题】如何从父组件中递归嵌套子组件

【英文标题】：How to style recursively nested child component from parent component

【发布时间】：2018-03-04 03:05:06

【问题描述】：

这是我的父组件 html

<div class="col-md-6">
          <div class="categories">
            <div class="title">All Categories</div>
            <nested-cat [data]="data" [key]="key" (action)="onClicked($event)" class="cat-container"></nested-cat>
          </div>
      </div>
    </div>

这是我的子组件 html

<ul class="categorys" *ngIf="items.length">
  <li class="cat"  *ngFor="let item of items">
    <div class="content">
      <span class="name">item.name</span>
      <span class="action">
          <button md-icon-button><md-icon color="primary" (click)="hello('hello')">edit</md-icon></button>
          <button md-icon-button><md-icon color="warn">delete</md-icon></button>
      </span>
    </div>
    <nested-cat *ngIf="item[key].length" [key]="key" [data]="item[key]" (action)="onClicked($event)"></nested-cat>
  </li>
</ul>

我正在关注this 和this 链接，发现:host(selector) 和:host-context(selector) 用于定位父子组件。但我无法弄清楚如何在我的情况下实施。

我已将这些 css 用于父级：

:host ::ng-deep nested-cat
    width: 100%;
    padding:0;
  

这很好，但是当我尝试定位第一个 ul 元素时，样式将应用于所有 ul 元素。

:host(nested-cat) ::ng-deep ul:first-of-type
    padding:0;//this will apply to all ul 

如何定位第一个嵌套猫的第一个孩子（即 ul）并将填充设置为 0？

更新：

这里是一个 plunkr https://plnkr.co/edit/fU0WLIwh9V6Euoz43hvS?p=preview

终于成功了：

  :host ::ng-deep .categories>nested-cat>ul
      padding: 0 4px;
  

【问题讨论】：

重复***.com/questions/36527605/…

How to style child components from parent component's css file?的可能重复

我已经链接了你在这里标记的所有链接，@Vega 先生

【参考方案1】：

这将解决：

:host ::ng-deep .content
  width: 100%;
  margin-left:-40px

DEMO

【参考方案2】：

这个选择器应该可以解决问题，至少对于这个特定的例子：

.bg > nested-cat > ul 
    padding-left: 0;

> 是直接子选择器。它只选择匹配的直接子元素，而不是树下的任何后代。

【讨论】：

感谢您的回答，但这不起作用。你能在plnkr中说明吗？