एनजी-सामग्री के साथ एक कोणीय 2 घटक बनाना गतिशील रूप से

Question

मैं <ng-content> का शरीर सेट करना चाहता हूं जबकि ComponentFactoryResolver का उपयोग करके गतिशील रूप से घटक को तत्काल चालू करना चाहता हूं।

मुझे लगता है कि मैं आउटपुट तक ComponentRef का उपयोग कर आउटपुट तक पहुंच प्राप्त कर सकता हूं, लेकिन <ng-content> सेट करने का कोई तरीका नहीं है।

कृपया ध्यान दें <ng-content> मैं सेटिंग करने की योजना बना रहा हूँ साधारण पाठ शामिल कर सकते हैं/span डायनामिक रूप से तैयार कर सकते हैं घटकों

@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

वहाँ projectableNodesvcRef.createComponent के लिए पैरामीटर विधि

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

आप यह गतिशील करने के लिए उपयोग कर सकते हैं दूसरे में एक घटक इंजेक्ट करें।

Let कहते हैं कि हम निम्नलिखित घटक

@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 {} 

हम यह गतिशील बना सकते हैं और अपने ng-content स्थानों पर कुछ नियंत्रण सम्मिलित करना चाहते है।

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

भी देखें

• Why is projectableNodes an any[][]?

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

: यह इस प्रकार की तरह किया जा सकता है