Angular 2：如何通过组件向下传递模板属性？

Question

如何通过 angular 2 中的组件属性传递模板？

我只做了第一步：

@Component({
    selector: 'tab',
    template: `<div>#!HERE GOES THE HEADER TEMPLATE!#
                <ng-content></ng-content>
              </div>`
})
export class Tab {
    @Input() title: string;
    @Input() headerTemplate:string;
    ...

可以这样使用：

<tab [title]="'Some Title'" [header-template]="'<p>{{title}}</p>'">Some Content</tab>

应该呈现：

<div><p>Some Title</p>Some Content</div>

此时我卡住了。

Answer 1

经过一些研究，我发现有人已经对这个问题有了一个优雅的解决方案。在 https://github.com/valor-software/ngx-bootstrap/blob/development/src/tabs 选项卡组件可以接收到选项卡标题的模板。 干得好！

检查代码解决方案依赖于两个指令，一个选项卡特定指令：TabHeading 和一个通用指令：NgTransclude)

如此处所示，可以通过模板创建组件：

<tab>
    <template tab-heading>Tab 2</template>
    Tab 2 content
</tab>

如果有人能更好地解释该实现，请提供。

Answer 2

虽然这个问题很老，但有更好的解决方案。无需将字符串作为模板传递 - 这是非常有限的。您可以创建一个元素并获取其 'TemplateRef' 并将其发送到以 TemplateRef 作为输入的组件。一个组件实际上可以将任意数量的 TemplateRef 作为输入，您可以在任意数量的地方注入这些模板。

请注意，'template' 元素已弃用，在所有情况下都应使用 'ng-template' 元素。

因此，在父组件中 -

<ng-template #thisTemplate>You Can put anything here, including other components</ng-template>

 <tab [template]="thisTemplate"></tab>

然后在 OP 的选项卡组件中

 import { Component, Input, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'

.. somehwere in its template ....

 <div #viewcontainer></div>

在组件中：

 @ViewChild('viewcontainer',{read:ViewContainerRef}) viewcontainer : ViewContainerRef;

 @Input() template : TemplateRef<any>;


 ngAfterViewInit() { 
     this.viewcontainer.createEmbeddedView(this.template);
 }

Answer 3

一种类似于透辉石的方法，但在模板中使用容器元素进行投影，而不是以编程方式：

parent.component.html

<app-child [template]=“templateRef”></app-child>
<ng-template #templateRef>
  <p>hello, from defined in parent</p>
</ng-template>

child.component.ts

<ng-container *ngTemplateOutlet=“templateRef”></ng-container>

Angular 2：如何通过组件向下传递模板属性？

Angular 2: How to pass down a template through a component property?

javascript

angular