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



angular-components (1)

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

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

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

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

vcRef.createComponent पद्धति के लिए vcRef.createComponent करने योग्य vcRef.createComponent पैरामीटर है

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

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

मान लीजिए कि हमारे पास निम्नलिखित घटक हैं

@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]
    ]
);

प्लंकर उदाहरण

यह भी देखें





angular-components