web-dev-qa-db-fra.com

Quels sont les scénarios pratiques de la directive * ngTemplateOutlet?

Je lisais sur *ngTemplateOutlet directive. L'utilisation de cette directive consiste à instancier dynamiquement un modèle par une référence de modèle et un objet de contexte en tant que paramètres.

Ce que je veux savoir, c'est que nous avons tellement de choses dans Angular pour obtenir les mêmes résultats que * ngTemplateOutlet tels que:

  1. Nous pouvons avoir plusieurs *ngIf qui pourrait rendre différents modèles en fonction de la valeur de la variable du composant dans le même composant. De la même manière, nous avons [ngSwitch] qui rendrait différents modèles pour nous en fonction de différentes valeurs.

  2. Nous pourrions utiliser des références avec *ngIf en faisant référence à la variable de référence du modèle de la variable respective.

Pour le premier cas:

<div *ngIf="condition1"> Content 1 </div>
<div *ngIf="condition2"> Content 2 </div>
<div *ngIf="condition3"> Content 3 </div>

Et pour ce dernier:

<ng-container *ngIf="condition then myTemplate else otherTemplate"></ng-container>
<ng-template #myTemplate> Some content... </ng-template>
<ng-template #otherTemplate> Some content... </ng-template>

Si nous avons de telles méthodes dans notre arsenal, quelle valeur supplémentaire *ngTemplateOutlet ajouter?

Quels sont les cas d'utilisation pratiques (le cas échéant) où nous ne pouvons pas utiliser les méthodes ci-dessus et devrions utiliser *ngTemplateOutlet directive ou est-ce juste une autre méthode à choisir pour obtenir le même résultat?

angulardirectiveng-template
13
patrick.1729

Angulaire sorties de modèle peut être utilisé pour insérer un modèle commun dans diverses sections d'une vue qui ne sont pas générées par une boucle ou soumises à une condition. Par exemple, vous pouvez définir un modèle pour le logo d'une entreprise et l'insérer à plusieurs endroits de la page:

<div>
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>Company History</h1>
  <div>{{companyHistory}}</div>
</div>
<form (ngSubmit)="onSubmit()">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
  <h1>User info</h1>
  <label>Name:</label><input type="text" [(ngModel)]="userName" />
  <label>Account ID:</label><input type="text" [(ngModel)]="accountId" />
  <button>Submit</button>
</form>
<div class="footer">
  <ng-container *ngTemplateOutlet="companyLogoTemplate"></ng-container>
</div>

<ng-template #companyLogoTemplate>
  <div class="companyLogo">
    <img [src]="logoSourceUrl">
    <label>The ACME company, {{employeeCount}} people working for you!</label>
  </div>
</ng-template>

Les modèles et les sorties de modèle peuvent également aider à rendre un composant configurable. L'exemple suivant est tiré de cet article par Angular University .

Un composant de conteneur d'onglets définit un modèle d'en-tête d'onglet par défaut, mais permet de le remplacer par un modèle personnalisé défini comme propriété d'entrée. Le modèle approprié (par défaut ou personnalisé) est ensuite inséré dans la vue avec une sortie de modèle:

@Component({
  selector: 'tab-container',
  template: `
    <ng-template #defaultTabButtons>
      <div class="default-tab-buttons">
        ...
      </div>
    </ng-template>
    <ng-container *ngTemplateOutlet="headerTemplate || defaultTabButtons"></ng-container>
    ... rest of tab container component ...
  `
})
export class TabContainerComponent {
    @Input() headerTemplate: TemplateRef<any>; // Custom template provided by parent
}

Dans le composant parent, vous définissez le modèle d'en-tête d'onglet personnalisé et le transmettez au composant de conteneur d'onglets:

@Component({
  selector: 'app-root',
  template: `      
    <ng-template #customTabButtons>
      <div class="custom-class">
        <button class="tab-button" (click)="login()">
          {{loginText}}
        </button>
        <button class="tab-button" (click)="signUp()">
          {{signUpText}}
        </button>
      </div>
    </ng-template>
    <tab-container [headerTemplate]="customTabButtons"></tab-container>      
  `
})
export class AppComponent implements OnInit {
  ...
}

Vous pouvez voir un autre cas d'utilisation avancée dans ce billet de blog par alligator.io .

1
ConnorsFan

Vous avez une question très valable. Si quelque chose peut être réalisé par simple cas if ou switch, pourquoi utiliser *ngTemplateOutlet?

Composant indépendant

Vous obtenez ces pensées parce que vous pensez à un niveau de composant indépendant. En d'autres termes, tout condition, les modèles sont dans le même composant. Nous pouvons facilement sélectionner le modèle sur la base de certaines conditions.

Composant de bibliothèque

Modèle dynamique

Quand je dis composant de bibliothèque, cela signifie un composant générique réutilisable ex Autocompleter ou Typeahead etc. Ces composants fournissent la partie fonctionnelle mais ils permettent au développeur de choisir leur propre template selon leurs besoins.

Voici le hic maintenant, ces modèles ne résident pas dans le Autocompleter, ils proviennent de son @ContentChild.

ex:

<ng-autocompleter>
   <ng-template #item let-item>{{item.name}}</ng-template>
<ng-autocompleter>

Dans l'exemple ci-dessus, le <ng-template> est en cours de définition du développeur dans le temps et ce n'est pas la partie directe de <ng-autocompleter>.

Contexte du modèle

Le contexte du modèle est très important chaque fois qu'un composant hautement configuré est développé. Obtenir le modèle dynamique (html) n'est pas suffisant pour atteindre l'objectif. Nous devons lier la valeur à ng-template. Puisque ng-template ne fait pas partie de ng-autocompleter nous devons passer le contexte qui contient toutes les données nécessaires à lier.

ex: dans le cas ci-dessus, si vous voyez, nous avons déclaré la variable item par let-item mais d'où vient item vient. Cela dépendra du contexte donné à *ngTemplateOutlet.

Conclusion d'une ligne Si nous voulons injecter les modèles qui seront déclarés à l'avenir par quelqu'un, je ne peux pas gérer ce cas par * ngIf ou * ngSwitch. Nous devons utiliser *ngTemplateOutlet.

2
Sunil Singh

Il y a un excellent article détaillé que j'ai écrit pour ceux qui n'ont toujours pas les nuances de * ngTemplateOutlet:

https://www.freecodecamp.org/news/everything-you-need-to-know-about-ng-template-ng-content-ng-container-and-ngtemplateoutlet-4b7b51223691/

1
patrick.1729