Übergabe der Vorlage an die Komponente in Angular

In diesem Artikel werden hauptsächlich zwei Methoden für die Übergabe von Vorlagen an Komponenten vorgestellt. Die erste Methode ist die NgTemplateOutlet-Anweisung und verschiedene Verwendungsmethoden

. Angular-Vorlagen sind jedoch reine Vorlagen und erfordern die Verwendung einiger spezieller Konzepte, um diese Funktion zu erreichen. date => Element

Der erste Weg<ng-content>

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

<wrapper>
  <span> World </span>
</wrapper>

<p>
  hello
  <span> World </span>
</p>

im Wrapper erscheinen, werden dann mehrere erscheinen? Die Antwort ist nein. Der Kern von <ng-content> besteht nur darin, Elemente zu verschieben und die eingehende Vorlage nicht automatisch zu erstellen. Selbst wenn Sie also ngFor zum Umschließen von <ng-content> verwenden, wird es nicht viele -Elemente geben. Wenn benutzerdefinierte Komponenten übergeben werden, werden diese Komponenten nur einmal instanziiert. <ng-content>

Erweiterte Verwendung

natürlich nur diese ist, wäre sie zu nutzlos. Sie können bei Verwendung von <ng-content> einen Selektor angeben , kann dieser Selektor passende direkte untergeordnete Elemente erfassen. Zum Beispiel: <ng-content>

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</p>

<wrapper>
  <span> World </span>
  2333
</wrapper>

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

Tag, Sie können das ngProjectAs-Attribut auch für untergeordnete Elemente verwenden, wodurch dieses Element durch den im übergeordneten Element angegebenen ng-Inhalt erfasst werden kann. Zum Beispiel: ng-content

<wrapper>
  <p ngProjectAs="span"> World </p>
  2333
</wrapper>

Die zweite Methode des NgTemplateOutlet-Befehls

kann zwar den Effekt haben, dass eine Vorlage übergeben wird, aber das ist sehr fatal Das Problem besteht darin, dass Daten nicht an die eingehende Vorlage übergeben werden können. Um Daten an die eingehende Vorlage zu übergeben, müssen Sie die NgTemplateOutlet-Direktive verwenden. ng-content

Grundlegende Verwendung

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: &#39;World&#39;};
}

Für dieses Element verwenden wir eine NgTemplateOutlet-Direktive, um den folgenden Namen anzugeben, der ng ist -Namensvorlage. Gleichzeitig wird das myContext-Objekt als instanziierter Datenkontext übergeben, sodass schließlich „Hallo Welt!“ angezeigt wird. Es ist erwähnenswert, wie der übertragene Datenkontext in ng-template abgerufen wird: ng-container . let-variableName='key'

Erweiterte Verwendung

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: &#39;World&#39;};
}

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

So bearbeiten Sie dynamisch gebundene Radiolisten in vue.js stapelweise

React-Komponenten verwenden Welche Befehle gibt es? Vue-Komponenten übertragen?

So kopieren Sie Inhalte in die Zwischenablage in JavaScript

Das obige ist der detaillierte Inhalt vonÜbergabe der Vorlage an die Komponente in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!