Detaillierte Erklärung der Winkelinhaltsprojektion

<!-- Komponente- App-Inhalt-Einzel -->
<div>
  <h2>Titel</h2>
  <!-- Anzeigeposition des Projektionsinhalts-->
  <ng-Inhalt></ng-Inhalt>
</div>
<!-- Verwendung -->
<App-Inhalt-Einzel>
  <div>das ist Inhalt</div>
</app-content-single>

<!-- Komponente- App-Inhalt-mehr -->
<div>
  <h3>Hirtentitel</h3>
  <ng-Inhalt auswählen=".header"></ng-Inhalt>
  <h3>Titel des Hauptteils</h3>
  <ng-Inhalt auswählen="[body]"></ng-Inhalt>
  <h3>Standardtitel</h3>
  <ng-Inhalt></ng-Inhalt>
  <h3>Fußzeilentitel</h3>
  <ng-Inhalt auswählen="Fußzeile"></ng-Inhalt>
</div>
<!-- Verwendung -->
<App-Inhalt-mehr>
  <div>Dies ist Standard01</div>
  <div class="header">das ist die Kopfzeile</div>
  <div>Dies ist default02</div>
  <div body>das ist der Text</div>
  <div>Dies ist Standard03</div>
  <footer>das ist die Fußzeile</footer>
  <div>Dies ist default04</div>
</app-content-more>

importiere { Direktive, TemplateRef } von '@angular/core';
@Richtlinie({
  Selektor: '[appChildRef]'
})
Exportklasse ChildRefDirective {
  Konstruktor(öffentliche TemplateRef: TemplateRef<any>) { }
}

<div Klasse = "Listenelement" *ngFor = "Person von Personen lassen;">
  <div>Name: {{ person.name }}</div>
  <div>Geld: {{ person.money }}</div>
  <div *ngIf="person.geld > 200">
    <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container>
  </div>
</div>

importiere { Komponente, ContentChild, OnInit } aus '@angular/core';
importiere { ChildRefDirective } aus '../../../../directives/child-ref.directive';
@Komponente({
  Selektor: ‚App-Personen‘,
  Vorlagen-URL: "./persons.component.html",
  styleUrls: ['./persons.component.scss']
})
export Klasse PersonsComponent implementiert OnInit {
  Personen: { Name: Zeichenfolge; Geld: Zahl; }[] = [
    { Name: 'Jack', Geld: 120 },
    { Name: 'Li Li', Geld: 210 },
    { Name: 'Zhang San', Geld: 170 },
  ];
  @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective;
  Konstruktor() { }
  ngOnInit(): void { }
}

<App-Personen>
  <ng-Vorlage appChildRef>
    <div style="font-size: 14px; color: red;">Dies ist untergeordneter Referenzinhalt</div>
  </ng-Vorlage>
</app-persons>

importiere { Direktive, Eingabe, TemplateRef } von '@angular/core';
@Richtlinie({
  Selektor: '[appChildRef]'
})
Exportklasse ChildRefDirective {
  // Den definierten Vorlagennamen akzeptieren - den entsprechenden Vorlageninhalt über diesen Namen und das Renderfeld in Personen anzeigen @Input() appChildRef!: string;
  Konstruktor(öffentliche TemplateRef: TemplateRef<any>) { }
}

<div Klasse = "Listenelement" *ngFor = "let Person von Personen;let i = Index;">
  <div>Name: {{ person.name }}</div>
  <div>Geld: {{ person.money }}</div>
  <!-- <div *ngIf="person.geld > 200">
    <ng-container *ngIf="childRef" [ngTemplateOutlet]="childRef.templateRef"></ng-container>
  </div> -->
  <div *ngIf="person.render && tempRefs[person.render]">
    <!-- Verwenden Sie die ngTemplateOutlet-Direktive, um die aktuellen Personendaten an die Vorlage zu übergeben -->
    <ng-container *ngTemplateOutlet="tempRefs[person.render].templateRef; Kontext: { $implicit: person, i: i }"></ng-container>
  </div>
</div>

importiere { Komponente, untergeordnetes Inhaltselement, untergeordnete Inhaltselemente, OnInit, QueryList } aus '@angular/core';
importiere { ChildRefDirective } aus '../../../../directives/child-ref.directive';
@Komponente({
  Selektor: ‚App-Formular-Einheit‘,
  Vorlagen-URL: "./form-unit.component.html",
  styleUrls: ['./form-unit.component.scss']
})
Exportklasse FormUnitComponent implementiert OnInit {
  Personen: { Name: Zeichenfolge; Geld: Zahl; Rendern?: Zeichenfolge; }[] = [
    { Name: 'Jack', Geld: 120, Render: 'temp1' },
    { Name: 'Schrift', Geld: 210, Render: 'temp2' },
    { Name: 'Während', Geld: 170, Render: 'temp3' },
  ];
  // @ContentChild(ChildRefDirective, { static: true }) childRef!: ChildRefDirective;
  @ContentChildren(ChildRefDirective) childrenRef!: Abfrageliste<ChildRefDirective>;
  Holen Sie sich tempRefs() {
    const aObj: beliebig = {};
    dies.childrenRef.forEach(Vorlage => {
      Konstant-Schlüssel: Zeichenfolge = Vorlage.appChildRef;
      aObj[Schlüssel] = Vorlage;
    })
    gib ein Objekt zurück;
  }
  Konstruktor() { }
  ngOnInit(): void { }
}

<App-Personen>
  <ng-template appChildRef="temp1" let-person let-index="i">
    <div style="font-size: 14px; color: red;">{{index}}-{{person.name}}: dies ist temp1</div>
  </ng-Vorlage>
  <ng-template appChildRef="temp2" let-person let-index="i">
    <div style="font-size: 14px; color: green;">{{index}}-{{person.name}}: dies ist temp2</div>
  </ng-Vorlage>
  <ng-template appChildRef="temp3" let-person let-index="i">
    <div style="font-size: 14px; color: orange;">{{index}}-{{person.name}}: dies ist temp3</div>
  </ng-Vorlage>
</app-persons>