如何在Angular2

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

P.S。我的目标是创建一个代码段页面，我可以将html代码段作为ng-content传递，用于呈现预览和代码示例。

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>