Question

我想创建一个可重用的组件，可以使用自定义模板来呈现数据，同时编写业务逻辑，所以我不必重复自己。

示例用例：分页列表。分页逻辑应该在可重用的组件中，因此它只写一次，但数据的主题/表示应该可以使用ng-template来自定义。

我在子组件中使用ngTemplateOutlet来引用父级中的ng-template，但我收到此错误：

错误TypeError：templateRef.createEmbeddedView不是函数

可重用组件中的第一个ng-container工作正常，它是最后3个发出错误。

这是我可重复使用的组件：

@Component({
  selector: 'reuseable-component',
  ...
})
export class ChildComponent { 
  @ContentChild(TemplateRef) templateRef;
}

<ng-container *ngIf="...">
    <ng-template [ngTemplateOutlet]="templateRef" 
                 [ngTemplateOutletContext]="{$implicit: result}">
    </ng-template>
</ng-container>

<ng-container *ngIf="..." [ngTemplateOutlet]="loading"></ng-container>

<ng-container *ngIf="..." [ngTemplateOutlet]="loadingMore"></ng-container>

<ng-container *ngIf="..." [ngTemplateOutlet]="noResults"></ng-container>

这是用法：

<reuseable-component>
    <ng-template let-result>
        // I have access to 'result' variable here, works fine.
    </ng-template>

    <ng-template #loading>
        // This gives the error above
    </ng-template>

    <ng-template #loadingMore>
        // This gives the error above
    </ng-template>

    <ng-template #noResults>
        // This gives the error above
    </ng-template>
</reuseable-component>

如何修复可重复使用组件中的最后3 ng-container行，以便它们在我的使用中呈现ng-template？

Answer 1

在this article的帮助下解决了这个问题。

在可重复使用的组件中添加了更多@ContentChild，并更改了ngTemplateOutlet以引用内容子项。

@Component({
  selector: 'reuseable-component',
  ...
})
export class ChildComponent { 
  @ContentChild(TemplateRef) templateRef;
  @ContentChild('loading') loadingRef: TemplateRef<any>;
  @ContentChild('loadingMore') loadingMoreRef: TemplateRef<any>;
  @ContentChild('noResults') noResultsRef: TemplateRef<any>; 
}

<ng-container *ngIf="...">
    <ng-template [ngTemplateOutlet]="templateRef" 
                 [ngTemplateOutletContext]="{$implicit: result}">
    </ng-template>
</ng-container>

<ng-container *ngIf="...">
    <ng-template [ngTemplateOutlet]="loadingRef"></ng-template>
</ng-container>

<ng-container *ngIf="...">
    <ng-template [ngTemplateOutlet]="loadingMoreRef"></ng-template>
</ng-container>

<ng-container *ngIf="...">
    <ng-template [ngTemplateOutlet]="noResultsRef"></ng-template>
</ng-container>

父组件中的逻辑不需要更改。

Answer 2

我认为最好使用@ContentChildren，[ngTemplateOutlet]可以是组件中的变量，您可以声明变量，并通过{{1}提供您想要的ng-template来自filter

的{} find

Answer 3

添加了要重复使用的组件

在“ .HTML”文件中：

<ng-container [ngTemplateOutlet] = "yourNameReference"
[ngTemplateOutletContext] = "{$ implicit: {name: 'Arthur', lastName: 'Lemos'}">
</ng-container>

[NgTemplateOutletContext]数据将发送到父组件。请记住，“ $隐式”可以接收您要发送到PAI组件的所有数据

在可重用组件的“ .ts”文件中，在您的课程中添加以下代码

@ContentChild ('yourNameReference') yourNameReference: TemplateRef <any>;

父亲组件（接受重复使用的组件）

将以下代码添加到“ .html”文件中

<ng-template #yourNameReference let-myDataa>
<p> {{myDataa.name}} {{myDataa.lastName}} </p>
</ng-template>

语言版本：9/10 文档：https://angular.io/api/common/NgTemplateOutlet

该文档没有显示ngTemplateOutlet在不同组件中的使用，但已经在某些方面有所帮助。

Angular 5：使用ngTemplateOutlet将ng-template传递给子组件

3 个答案: