Ü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

Ich schreibe derzeit eine Datumsauswahlkomponente. Um verschiedenen Anforderungen gerecht zu werden, die in der Zukunft auftreten können, muss ich in der Lage sein, den Stil der Komponente stark anzupassen. Um dieses Ziel zu erreichen, müssen Sie in der Lage sein, den Inhalt zu steuern, der in jedem Datumsraster außerhalb der Datumsauswahlkomponente angezeigt werden soll, z. B. die Markierung von Feiertagen. Zu diesem Zeitpunkt muss der Aufrufer einen Teil der Vorlage der Komponente bereitstellen.

In React ist diese Anforderung recht einfach. Implementieren Sie einfach eine Funktion wie

. 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>

<ng-content> nicht gewesen Die offizielle Dokumentation enthält nicht einmal Platzhalter. Dies behindert jedoch nicht unsere Nutzung. Begeisterte ausländische Internetnutzer haben die Eigenschaften und Funktionen von <ng-content> zusammengefasst.

Grundlegende Verwendung

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

Angenommen, wir haben die obige Komponente und nennen sie dann so:

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

Dann sieht das endgültige Rendering-Ergebnis so aus:

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

scheint ein sehr einfacher Ersatz zu sein, aber wenn mehrere

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

Wenn die Funktion von

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>

und verwenden Sie es dann wie folgt:

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

Das endgültige Rendering-Ergebnis sieht so aus:

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

Zusätzlich zum Festlegen des SELECT-Attributs von

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>

Dieses Mal wird die übergebene Vorlage zu einem p, aber da ngProjectAs festgelegt ist, wird „World“ unterhalb der Trennlinie angezeigt.

Die zweite Methode des NgTemplateOutlet-Befehls

Die Verwendung von

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

Mit diesem Befehl kann ein TemplateRef-Objekt an einer angegebenen Stelle in der Vorlage instanziiert werden. Gleichzeitig können auch Daten übergeben werden während des Instanziierungsprozesses. TemplateRef kann über das ng-template-Tag erstellt werden:

@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

Der nächste Schritt besteht darin, die am Anfang dieses Artikels genannten Anforderungen umzusetzen, indem die Vorlage außerhalb der Komponente übergeben wird. Nehmen wir das obige Beispiel als Beispiel. Da die Vorlage als Unterinhalt von außen übergeben werden muss, müssen wir die Vorlage hier bei Bedarf manuell erfassen:

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

Solch eine einfache Änderung kann es uns ermöglichen, dass die Komponente Vorlagen von der Außenwelt akzeptiert. Probieren wir es aus:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

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!