web-dev-qa-db-fra.com

Comment charger le ng-template dans un fichier séparé?

Dans l'exemple ci-dessous, j'ai utilisé ng-template comme ci-dessous et cela fonctionne bien.

Exemple de lien: cliquez ici

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span> {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
        <button ejs-button cssClass="e-info">Sign In</button>
      </span>
</ng-template>

Mais je veux créer un nouveau fichier pour le contenu ng-template et je veux l'utiliser dans un autre fichier. J'ai essayé comme ci-dessous mais ne fonctionne pas. S'il vous plaît, aidez-moi à trouver une solution à ce cas.

template.html

<ng-template #template let-dataSource="">
  <span *ngIf="dataSource.iconCss" class="e-menu-icon {{dataSource.iconCss}}"></span>
  {{dataSource.header}} {{dataSource.text}}
  <span *ngIf="dataSource.templateHeader" class="e-login-content">
    <button ejs-button cssClass="e-info">Sign In</button>
  </span>
</ng-template>

default.html

<div class="control-section">
  <ejs-menu #menu [items]='dataSource' [fields]='menuFields'>
    <ng-container *ngTemplateOutlet="template;"></ng-container>
  </ejs-menu>
</div>

Échantillon 2: échantillon 2

ref stackoverflow question: angular2 ng-template dans un fichier séparé

htmlangularng-templateng-container
3
kumaresan_sd

Vous pouvez avoir un composant pour vos modèles (nommez-le tplComponent) et à l'intérieur, créez autant de modèles que vous le souhaitez. Ensuite, dans d'autres composants, obtenez une instance de tplComponent et obtenez le modèle à partir de cela. Voici une question qui a un exemple de cette approche (je ne l’ai pas essayé cependant).

Permettez-moi de savoir si cela fonctionne.

0
Vahid

Vous pouvez utiliser * ngTemplateOutlet pour archiver le même

Veuillez vous référer au lien ci-dessous

ngTemplateOutlet

0
siddharth shah