在Angular2中渲染之前如何获取ng-content

Question

我需要按原样（在呈现给浏览器之前）将html代码写入组件的选择器标记中。 例如，假设我的组件是父母和孩子，

在孩子里

@Component({
    selector: 'child',
    template: '<ng-content></ng-content>'
})
...

在父母中

@Component({
    selector: 'parent',
    template: `
        <child>
            <p>Title 1</p>
            <some-other-component [input]="1"></some-other-component>
        </child>


        <child>
            <p>Title 2</p>
            <some-other-component [input]="2"></some-other-component>
        </child>
    `
})
...

在子组件中，我需要将HTML代码作为字符串写入标签内。 即在上述情况下，我需要"<p>Title 1</p> <some-other-component [input]="1"></some-other-component>"和"<p>Title 2</p> <some-other-component [input]="2"></some-other-component>" 。

PS我的目标是创建一个代码段页面，在这里我可以将ng-content传递给html代码段，这将用于呈现预览和代码示例。

Answer 1

您可以将唯一的类添加到内容部分，然后选择使用下一个组件配置。 选择器是任何有效的querySelector fn选择器

<ng-content select=".first">

和

<ng-content select=".second">

所以你的内容可以像这样

    <child class="fisrt">
        <p>Title 1</p>
        <some-other-component [input]="1"></some-other-component>
    </child>


    <child class="second">
        <p>Title 2</p>
        <some-other-component [input]="2"></some-other-component>
    </child>