多种ng含量 [英] Multiple ng-content

问题描述

我正在尝试使用Angular 6中的多个ng-content构建自定义组件，但这无法正常工作，我也不知道为什么.

I am trying to build a custom component using multiple ng-content in Angular 6, but this is not working and I have no idea why.

这是我的组件代码:

<div class="header-css-class">
<ng-content select="#header"></ng-content>
</div>
 <div class="body-css-class">
<ng-content select="#body"></ng-content>
</div>

我试图在另一个地方使用此组件，并在body和ng-content的标头select中呈现两个不同的HTML代码，如下所示:

I am trying to use this component in another place and render two different HTML code inside body and header select of ng-content, something like this:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

但是该组件呈现空白.

你们知道我可能做错了什么，还是在同一组件中呈现两个不同部分的最佳方法是什么?

Do you guys know what I could be doing wrong or what is the best way to render two different sections in same component?

谢谢！

推荐答案

1. 您可以添加虚拟属性header和body，而不是模板引用(#header, #body).
2. 然后将ng-content与select属性(如select="[header]")一起使用.

1. You could add dummy attributes header and body as opposed to template references (#header, #body).
2. And transclude using ng-content with select attribute like select="[header]".

app.comp.html

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

演示

这篇关于多种ng含量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！