将变量传递给ng-container元素

Question

我有一个带有重复html代码的切换用例，所以我想通过使用ng-container来减少这种情况，如下所示：

<div *ngSwitchCase="competences">
  <ng-container *ngTemplateOutlet="commonOsiCatalogInfoContainer"></ng-container>
</div>

下面是ng-template：

<ng-template #commonOsiCatalogInfoContainer>
    <osi-catalog-info-container>
        <div header>
            {{ veld.titel }}
        </div>
        <div body>
            <li *ngFor="let blok of veld.waarde">
                <div class="s-margin-b">
                    <osi-li-h>{{ blok.toets_omschrijving }}</osi-li-h>
                </div>
                <ion-row *ngFor="let _veld of blok.velden" class="s-margin-b">
                    <ion-col col-auto class="work-form-title-col">
                        <osi-h4>{{_veld.titel}}</osi-h4>
                        <osi-li-body class="osi-black-87 d-block"><b>{{_veld.waarde}}</b></osi-li-body>
                    </ion-col>
                </ion-row>
            </li>
        </div>
    </osi-catalog-info-container>
</ng-template>

唯一不同的是osi-li-h值，在某些情况下是blok.title，如何在ng-template中使此osi-li-h动态

Answer 1

您可以将上下文传递给ngTemplate，如本文档https://angular.io/api/common/NgTemplateOutlet中所述

您可以使用这两种方法中的任何一种来提供上下文

<div *ngSwitchCase="Field.FIELD_NAME_COMPETENCES">
  <ng-container *ngTemplateOutlet="commonOsiCatalogInfoContainer; context: contextExp"></ng-container>
</div>

或者直接使用ngTemplate，比如

<div *ngSwitchCase="Field.FIELD_NAME_COMPETENCES">
    <ng-template [ngTemplateOutlet]="commonOsiCatalogInfoContainer [ngTemplateOutletContext]="contextExp"></ng-template>
</div>

在上面的两个例子中，contextExp只是一个JSON对象。

然后，您可以直接在模板中使用传递的上下文属性，如下所示

<ng-template #commonOsiCatalogInfoContainer let-myIdentifier="JSON_PROPERTY">
    <osi-catalog-info-container>

<div *ngIf="myIdentifier == 'something'"></div>

    </osi-catalog-info-container>
</ng-template>

Answer 2

您可以将上下文对象附加到ng-container并将值传递给您的模板。

根据docs

您可以通过设置ngTemplateOutletContext将上下文对象附加到EmbeddedViewRef。ngTemplateOutletContext应该是一个对象，该对象的键将可用于本地模板let声明的绑定。

在您的模板中，您必须这样做：

<ng-container *ngTemplateOutlet="eng; context: myContext"></ng-container>
<ng-template #eng let-name><span>Hello {{name}}!</span></ng-template>