İçerik yansıtmayı engelleyen kontrol akışı

Bir kontrol akışı bloğunun içindeki bir eleman veya <ng-template>, belirli bir <ng-content> yuvasına yansıtılacaktı, ancak blokta birden fazla kök düğüm olduğu için yansıtılmıyor.

import {Component} from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <ng-content select="[card-title]" />
    <ng-content />
  `,
})
class Card {}

@Component({
  imports: [Card],
  // NG8011: @if bloğunun iki kök düğümü (h2 ve p) olduğu için <h2 card-title>
  // "[card-title]" yuvasına yansıtılmaz.
  template: `
    <app-card>
      @if (showTitle) {
        <h2 card-title>Başlık</h2>
        <p>Alt başlık</p>
      }
    </app-card>
  `,
})
class MyComponent {
  showTitle = true;
}

Hatayı ayıklama

Kontrol akışı blokları, uygulandıkları elemanı yansıtan *ngIf ve *ngFor davranışını taklit eder. Bu yalnızca bloğun tek bir kök düğümü olduğunda çalışır. Blokta birden fazla kök düğüm olduğunda Angular bir yuva seçmek için elemanı kullanamaz, bu yüzden <h2 card-title>, Card bileşeninin [card-title] yuvası yerine varsayılan <ng-content /> yuvasında yer alır.

Metin de bir kök düğüm sayılır. Bu nedenle yansıtılan elemanın yanındaki başıboş bir metin satırı aynı soruna yol açar. Bloğu içeren bileşen preserveWhitespaces: true ayarını kullanıyorsa boşluklar da sayılır.

Hatayı çözmek için aşağıdaki yaklaşımlardan birini seçin:

• İçeriği, yuvanın seçicisiyle eşleşen ngProjectAs kullanan bir <ng-container> içine alın. Kapsayıcının içindeki her şey o yuvaya yansıtılır.

  @Component({
    imports: [Card],
    template: `
      <app-card>
        @if (showTitle) {
          <ng-container ngProjectAs="[card-title]">
            <h2>Başlık</h2>
            <p>Alt başlık</p>
          </ng-container>
        }
      </app-card>
    `,
  })
  class MyComponent {
    showTitle = true;
  }

• İçeriği birden fazla bloğa bölün, böylece her birinin kökünde yansıtılabilir tek bir düğüm olur.

  @Component({
    imports: [Card],
    template: `
      <app-card>
        @if (showTitle) {
          <h2 card-title>Başlık</h2>
        }
        @if (showTitle) {
          <p>Alt başlık</p>
        }
      </app-card>
    `,
  })
  class MyComponent {
    showTitle = true;
  }