Question

如何通过角度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

虽然这个问题很老，但还有更好的解决方案。没有必要将字符串作为模板传递 - 这是非常有限的。您可以创建一个元素并获取其“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'

....有些人在模板中......

 <div #viewcontainer></div>

在组件中向下：

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

 @Input() template : TemplateRef<any>;


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

Answer 2

经过一番研究，我已经检查过某人已经有一个优雅的解决方案来解决这个问题。在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 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：如何通过组件属性传递模板？

3 个答案: