3

以下のコンテンツを HTML で動的に追加したい。

<ng-template #elseblock *ngIf="var">
    <h1>
        {{heading}}
    </h1>
</ng-template>

これには以下のアプローチを使用しています。

app.component.ts ファイル内:

htmldata: any = `<ng-template #elseComponent *ngIf="var">
<h1>
  {{ heading }}
</h1>

`;

および app.component.html で

 <div [innerHTML]="htmldata"> </div>

ただし、このアプローチは DOM で h1 タグのみをレンダリングします (ng-template なし)。

#else ブロック、*ngIf も機能するように、ng-template を動的に追加するのを手伝ってください。

4

1 に答える 1

1

あなたの質問からの私の理解によると、コンテンツの投影を行いたいと考えています。

このタイプのユースケースにはテンプレート アウトレットを使用する必要があります。

<ng-template #heading let-heading>
  <h1>
    {{heading}}
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="heading; context: ContextObj">
</ng-container>

Angular の公式ドキュメントngTemplateOutletまたは ngTemplateOutlet
に関する素晴らしいブログ投稿

于 2018-04-05T04:47:19.513 に答える