javascript - Vise innholdet av en komponent som jeg hentet med @ContentChildren eller @ViewChild

Så jeg prøver å vise barnekomponenter på spesifikke steder i komponenten min.

Jeg har følgende:

@Component({
  selector: 'app-item-list',
  template: `
<p *ngFor="let item of items">
  {{item.order}}
  <!-- display content of child component here -->
</p>`
})
export class ItemListComponent implements OnInit, AfterContentInit {

  //Get all child components of the type ItemComponent and store them.
  @ContentChildren(ItemComponent, {descendants: true}) 
  items?: QueryList<ItemComponent>;
  constructor() { }

  ngOnInit() {
  }
    
  ngAfterContentInit(): void {
      
  }

}

@Component({
  selector: 'app-item',
  template: `
<p>
  item works!
</p>
<ng-content></ng-content>
`
})
export class ItemComponent implements OnInit {

  @Input() order?: string;
  constructor() { }

  ngOnInit() {
  }

}

Jeg prøvde å vise det ved å bruke <ng-content select="item">, men det fungerte ikke.

Med følgende:

<app-item-list>
  <app-item order="2">
    test2
  </app-item>
  <app-item order="1">
    test1
  </app-item>
</app-item-list>

det forventede resultatet er

2
item works!
test2
1
item works!
test1

https://stackblitz.com/edit/angular-ivy-2aibgt

Svar #1

Jeg kan foreslå deg en løsning som brukes i Angular-materialbiblioteket.

  • Pakk inn innholdet i app-item-komponenten i en <ng-template>-tag

element.komponent.html

<ng-template>  <----------------------------- wrapper
  <p>
    item works!
  </p>
  <ng-content></ng-content>
</ng-template>
  • da kan vi ta en referanse til den TemplateRef

element.komponent.ts

@ViewChild(TemplateRef, {static: true}) template: TemplateRef<any>;
  • endelig kan vi bruke det i en løkke av app-item-list-komponenten

item-list.component.html

<p *ngFor="let item of items">
  {{item.order}}
  <ng-template [ngTemplateOutlet]="item.template"></ng-template>
</p>

Gafflet Stackblitz

Svar #2

Det er egentlig ingen måte å oppnå dette på ved å bruke ng-content (så vidt jeg vet). ng-content er kun for projeksjon av statisk innhold.

Ta en titt på brukstilfellet her - https://github.com/angular/angular/issues/8563 - avsnitt 2 bekrefter det faktum at du må bruke en spørring med viewref for å gjøre det du vil gjøre, det vil si løsningen som @yurzui ga.

Du kan alltid bruke velgeren for å statisk velge hvilken del av innholdet du vil projisere, men jeg mistenker at dette ikke er det du leter etter:

<ng-content select="[order=2]">
</ng-content>
<ng-content select="[order=1]">
</ng-content>

Relaterte artikler