Question

我的一个Angular模板中有一个 ngFor 循环，其中包含另一个组件，这里是一个片段：

<div *ngFor="let thing of things" (click)="onClick($event, thing)">
    <app-thing [data]="thing"></app-thing>
</div>

并且Angular正在使用包含名为 _ngcontent_c4 的属性的div包装每个 app-thing ，如下所示：

<div _ngcontent_c4>
    <app-thing...>
        <!-- ... -->
    </app-thing>
</div>
<div _ngcontent_c4>
    <app-thing...>
        <!-- ... -->
    </app-thing>
</div>
<div _ngcontent_c4>
    <app-thing...>
        <!-- ... -->
    </app-thing>
</div>
<!-- ... --->

父div包装器导致问题，特别是在样式方面，并且使用：host 选择器来设置组件本身的样式变得更加困难。我不得不在：host 之外移动一些样式来定位父级以使我的flexbox布局正常工作。

有没有办法让Angular不要包装组件？

Answer 1

您可以通过在组件元数据中设置encapsulation属性来控制Angular如何将样式应用于您的组件：

@Component({
  encapsulation: ViewEncapsulation.None,
})
export class Component {}

ViewEncapsulation.None不会添加额外的属性。查看文档中的ViewEncapsulation和Component Styles了解详情。

Answer 2

不是迭代div中的组件，而是迭代组件本身，这将应用（this）样式。

<div *ngFor="let thing of things" (click)="onClick($event, thing)">
    <app-thing [data]="thing"></app-thing>
</div>

而是这样做：

<app-thing *ngFor="let thing of things" (click)="onClick($event, thing)" [data]="thing"></app-thing>

这样可以使样式更容易，并且会将样式保留在其组件中，就像您希望的那样。

带有_ngcontent-cx div的Angular 4包装组件

2 个答案: