So fügen Sie ein ng-Template-Element ohne Bedingung in Angular 2 ein

Lesezeit: 1 Minute

Ich benötige ein HTML-Fragment mehr als einmal in meinem Angular-Template. Anstatt den HTML-Code mehrmals zu schreiben, habe ich mich entschieden, ihn in eine einzufügen ng-Vorlage -Element und verwenden Sie dieses im Code replizierte Element.

Zum Beispiel:

<ng-template #myTemplate>
  <h1>Some Header</h1>
  <p>Some text...</p>
</ng-template>

Wie kann ich das jetzt einbinden ng-Vorlage Element irgendwo in der Vorlage?

Ich weiß, dass dies mit einem möglich ist ngIf Aussage, etwa so:

<div *ngIf="false; else myTemplate"></div>

Allerdings fühlt sich das für mich wie ein schmutziger Hack an. Gibt es eine andere Möglichkeit?

  • Es ist kein schmutziger Hack, es steht in der Angular-Dokumentation: angle.io/api/common/NgIf

    – Filipbarak

    21. Februar 2018 um 13:31 Uhr


  • @filipbarak was er meint, ist, dass es sich wie ein schmutziger Hack anfühlt, es mit “false; else …” zu tun – und das IST ein schmutziger Hack. Die offizielle Antwort finden Sie unten.

    – Patrick Keller

    21. Februar 2018 um 13:40 Uhr


  • @PatrickKelleter ja, das ist der Punkt

    – Benutzer7346048

    21. Februar 2018 um 13:42 Uhr

  <ng-template #myTemplate>
      <h1>Some Header</h1>
      <p>Some text...</p>
  </ng-template>

  <ng-container *ngTemplateOutlet="myTemplate">
  </ng-container>

Wir können definitiv ‘ng-Container’ um die ‘ zu instanziierenmeineVorlage‘Vorlage auf der Seite.

Wir beziehen uns auf die ‘meineVorlage‘-Vorlage über ihre Vorlagenreferenz #myTemplate, und wir verwenden die strukturelle Direktive ngTemplateOutlet, um die Vorlage zu rendern.

ngTemplateOutlet Direktive fügt eine eingebettete Ansicht aus einer vorbereiteten TemplateRef ein.

Sie haben Recht. Es mit einem ngIf und einem fest codierten “falschen” Wert zu tun, ist hier nicht der richtige Weg. Was Sie suchen, ist die NgTemplateOutlet-Direktive:

https://angular.io/api/common/NgTemplateOutlet

1437030cookie-checkSo fügen Sie ein ng-Template-Element ohne Bedingung in Angular 2 ein

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy