首页 文章

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

提问于
浏览 次
1

我的一个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不包装组件？

angular angular2-template

2 回答

  • 3

    而不是迭代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>

    这将使样式更容易，并将您的样式保持在其组件中，就像您希望的那样 .

    回复于
  • 3

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

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

    ViewEncapsulation.None 不会添加额外的属性 . 检查文档中的ViewEncapsulation和Component Styles以获取更多信息 .

    回复于

相关问题