Question

我试图在我的父组件中定义一些可以传递给子组件的html。这可能吗？我尝试过这样的事情：How to pass an expression to a component as an input in Angular2?，但我没有运气。也许我的语法错了。我对let感到有些困惑。感谢所有帮助和任何解释，以帮助我更好地理解这一点。

@Component({
    selector: 'app-my-parent',
    template: `
    <div>other parent html</div>
    <app-my-child [property]="value">
        <ng-template #someTemplate">value.first</ng-template>
    </app-my-child>
    <app-my-child [property]="value">
        <ng-template #someTemplate">value.second</ng-template>
    </app-my-child>
    `
})
export class MyParent {
}

@Component({
    selector: 'app-my-child',
    template: `
    <div>other child html</div>
    how do I access the template from here? Is there a way to do binding with templates? 

})
export class MyChild {
      @Input() property;
}

Answer 1

您需要向子组件添加ng-content标记，以便有角度知道它应该转换内容以及放置内容的位置：

@Component({
    selector: 'app-my-child',
    template: `
    <div>other child html</div>
    <ng-content></ng-content>
    `
})
export class MyChild {
}

然后你需要删除ng-template标签，因为它告诉angular实际上根本不渲染这些东西，因为它们是用于其他地方的模板

在父母中使用它非常简单：

<app-my-child>Anything put between these component tags will be transcluded to the ng-content tag</app-my-child>

Answer 2

正如@ bryan60指出的那样，子模板需要<ng-content>。在父级中，您放置在子选择器中的所有内容都将显示在AfterContentInit()生命周期钩子执行之前的ng-content位置：

父组件模板：

<child-cmp>
  <p>This will appear within ng-content of ChildComponent</p>
</child-cmp>

子组件模板：

  <h2>I am ChildComponent</h2>
  <ng-content></ng-content>

Live demo

将父级中定义的html传递给子级

2 个答案: