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

【问题标题】：Angular 4 wrapping components with _ngcontent-cx divs带有 _ngcontent-cx div 的 Angular 4 包装组件
【发布时间】：2017-04-19 08:13:20
【问题描述】：

我的一个 Angular 模板中有一个 ngFor 循环，其中包含另一个组件，这是一个 sn-p：

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

Angular 将每个 app-thing 包装在一个 div 中，该 div 包含一个名为 _ngcontent_c4 的属性，如下所示：

<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 不包装组件？

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

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

<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>

这将使样式更容易，并将您的样式保留在其组件中，就像您想要的那样。

【讨论】：

【解决方案2】：

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

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

ViewEncapsulation.None 不会添加额外的属性。查看文档中的ViewEncapsulation 和Component Styles 了解更多信息。

【讨论】：