Dinamik olarak ng içeriğiyle bir açısal2 bileşeni oluşturma

Question

ComponentFactoryResolver'u kullanarak bir bileşeni dinamik olarak başlatırken <ng-content> gövdesini ayarlamak istiyorum.

girdisi ile numaralı çıktıya erişim sağlayabildiğimi görüyorum, ancak <ng-content>'u ayarlamak için bir yol değil.

basit metin içerebilir ben ayarına planlıyorum <ng-content> unutmayınız/dinamik olarak oluşturulan yayılabilir bileşenler

@Component({ 
    selector: 'app-component-to-project', 
    template: `<ng-content></ng-content>` 
}) 
export class ComponentToProject implements AfterContentInit { 

    ngAfterContentInit() { 
     // We will do something important with content here 
    } 

} 


@Directive({ 
    selector: 'appProjectionMarker' 
}) 
export class ProjectionMarkerDirective implements OnInit { 

    constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) { 
    } 

    ngOnInit() { 
     const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject); 
     const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory); 
     // Question: How to set content before the child's afterContentInit is invoked 
    } 

} 

@Component({ 
    selector: 'appTestComponent', 
    template: `<div appProjectionMarker></div>` 
}) 
export class TestComponent {} 

Answer 1

Bunu dinamik için kullanabileceğiniz projectableNodes parametre

createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>; 

yöntem vcRef.createComponent için vardır bir bileşeni diğerine enjekte edin.

Let aşağıdaki bileşeni Biz dinamik olarak oluşturmak ve ng-content yerlere bazı kontrolleri eklemek istediğiniz

@Component({ 
    selector: 'card', 
    template: ` 
     <div class="card__top"> 
      <h2>Creating a angular2 component with ng-content dynamically</h2> 
     </div> 
     <div class="card__body"> 
      <ng-content></ng-content> 
     </div> 
     <div class="card__bottom"> 
      <ng-content></ng-content> 
     </div> 
    ` 
}) 
export class CardComponent {} 

olduğunu varsayalım.

const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent); 
const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent); 

let bodyRef = this.vcRef.createComponent(bodyFactory); 
let footerRef = this.vcRef.createComponent(footerFactory); 

const cardFactory = this.cfr.resolveComponentFactory(CardComponent); 

const cardRef = this.vcRef.createComponent(
    cardFactory, 
    0, 
    undefined, 
    [ 
     [bodyRef.location.nativeElement], 
     [footerRef.location.nativeElement] 
    ] 
); 

Plunker Example

See

Why is projectableNodes an any[][]?

Pawel Kozlowski - Reactive parenting with Angular 2 - NG-BE 2016

da

• şöyledir: Sanki yapılabilir