javascript - Hvordan laste komponenter dynamisk i Angular 12

Veien jeg lærte her i Angular-dokumentasjonen, er å kalle createComponent() på en containerreferanse.

I stedet for å bruke et input som i eksemplet, importerer jeg en komponent og prøver å sende den direkte, fordi det også i dokumentasjonen står:

Angular krever ikke lenger komponentfabrikker for å dynamisk opprette komponenter. Bruk en annen signatur av createComponent-metoden, som lar deg sende inn komponentklassen direkte.

Men hvorfor klager kompilatoren min da? Etter min forståelse av spesifikasjonen, er følgende den anbefalte løsningen.

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const componentRef = viewContainerRef.createComponent<RecentGridComponent>(RecentGridComponent);
  }

Men jeg får

Argument av typen 'typeof RecentGridComponent' kan ikke tilordnes til parameter av typen 'ComponentFactory'. Typen 'typeof RecentGridComponent' mangler følgende egenskaper fra typen 'ComponentFactory': selector, componentType, ngContentSelectors, inputs, og 2 til. ts(2345)

I stedet måtte jeg instantiere en fabrikk (full kode)

import { Component, ComponentFactoryResolver, OnInit, ViewChild } from '@angular/core';
import { RecentGridComponent } from '../recent-grid/recent-grid.component';
import { ResultAreaDirective } from '../result-area.directive';

@Component({
  selector: 'app-search-filters',
  templateUrl: './search-filters.component.html',
  styleUrls: ['./search-filters.component.sass']
})
export class SearchFiltersComponent implements OnInit {

  @ViewChild(ResultAreaDirective) resultArea!: ResultAreaDirective

  constructor(private resolver: ComponentFactoryResolver) { }

  ngOnInit(): void {
  }

  loadMore() {
    const viewContainerRef = this.resultArea.viewContainerRef;
    const factory = this.resolver.resolveComponentFactory(RecentGridComponent)
    const componentRef = viewContainerRef.createComponent<RecentGridComponent>(factory)
  }

}

Svar #1

Som påpekt av yurzui, er den riktige spesifikasjonen for v12 her

For å bestå klassen direkte, bør man bruke v13.

Relaterte artikler