typescript - angular 5: byta plats på dynamiska komponenter

Jag vill byta plats på de dynamiskt placerade komponenterna inne i vyn.

d.v.s. Jag har skapat komponenter dynamiskt med id=1 och 2 som visas i figuren.

nu behöver jag byta plats på båda komponenterna, men hur?

En sak jag vet (endast teoretiskt) är att platsen kan ändras genom move-metoden inom ViewContainerRef class via objekt som viewContainerRef.move(componentRef.hostView, index).

Jag försökte, men positionerna bytte inte plats.

@ViewChild(ContainerRefDirective) location: ContainerRefDirective;

let componentFactory = this.factoryResolver.resolveComponentFactory(EntryComponent);
let componentRef = this.location.viewContainerRef.createComponent(componentFactory);

let entryComponent: EntryComponent = componentRef.instance;
// lets say counter is variable that increments its value on new component creation.
entryComponent.Id = ++counter; 

// move method is being called right after a new component is created and placed. 
//this piece of code is in the same method (that is creating the dynamic components)
this.location.viewContainerRef.move(componentRef.hostView, 1);

Jag har läst dokumentationen för ViewContainerRef på angular.io och läst nästan samma fråga angående detta problem men kunde inte förstå eller lösa detta problem.

Svar #1

Varför binder du inte dina två dynamiska komponenter till en array? till exempel, om du har ett "objectA" och "objectB":

this.renderArray.push(objectA);
..
this.renderArray.push(objectB);

och din HTML ser ut så här:

<ng-container *ngFor="let renderObject of renderArray">
   <<you can reference objectA and objectB by using "renderObject.value" etc.>>
</ng-container>

när du behöver byta deras positioner behöver du bara manipulera arrayen och Angular tar hand om resten:

this.renderArray = this.renderArray.reverse();

Det kommer att rendera om ngFor-behållarna i en ny ordning. Se fungerande exempel här.

Svar #2

Löst detta problem.

Vad gjorde jag?

Jag ändrade värdena istället för att byta plats på komponenterna

d.v.s. Jag ersatte värdena 1 <=> 2 och det såg ut som att komponenterna var utbytta.

Hur?

// array to hold the newly created component instances
entryComponents: EntryComponent[] = new Array<EntryComponent>();

Tryck sedan den nyss skapade komponenten in i den arrayen

let factoryResolver = this.factoryResolver.resolveComponentFactory(EntryComponent);    
let componentRef = this.location.viewContainerRef.createComponent(factoryResolver);

this.entryComponents.push(componentRef.instance); // getting components' instances

Byt nu värdena så att komponenterna kan se ut som om de har bytts ut.

Tack @ForestG, för detta förslag

Relaterade artiklar