ViewChildren में गतिशील घटक जोड़ें

Question 1

वर्तमान में, मैं गतिशील रूप से एक घटक को लोड कर सकता हूं और इसे व्यूचाइल्ड में इस तरह प्रदर्शित कर सकता हूं:

@Component({
   selector: '...',
   template: '<ng-container #viewRef></ng-container>'
})
export class SomeComponent {
@ViewChild('viewRef', {read: ViewContainerRef}) public viewRef;

  constructor(private compiler: Compiler) {}

  ngAfterViewInit() {
    this.compiler.compileModuleAndAllComponentsAsync(SomeModule).then((factory) =>  {
      this.componentRef = this.placeholder.createComponent(factory);
    });
  }
}

अब मैं एकाधिक घटकों को लोड करना चाहता हूं और उन्हें एक सूची में गतिशील रूप से प्रदर्शित करना चाहता हूं। ViewChildren इसका समाधान होना चाहिए। समस्या यह है, ViewChildren ViewChild पर नए तत्वों को जोड़ने या उन्हें createComponent के समान बनाने की अनुमति नहीं देता है।

मैं गतिशील घटक कैसे बना सकता हूं और उन्हें ViewChildren में कैसे जोड़ सकता हूं?

angular

5

Thomas Schneiter 18 फरवरी 2019, 11:50

Answer

आप DOM से तत्वों या निर्देशों की QueryList प्राप्त करने के लिए ViewChildren का उपयोग कर सकते हैं। जब भी कोई चाइल्ड एलिमेंट जोड़ा जाता है, हटाया जाता है या स्थानांतरित किया जाता है, तो क्वेरी सूची अपडेट की जाएगी, और क्वेरी सूची में देखे जा सकने वाले परिवर्तन एक नया मान उत्सर्जित करेंगे। इसका मतलब है कि आप अपने viewRefs.changes ईवेंट पर सब्सक्रिप्शन बना सकते हैं और ComponentFactoryResolver का उपयोग करके गतिशील रूप से घटकों को लोड कर सकते हैं। . नीचे दिया गया उदाहरण देखें:

export class SomeComponent {
    @ViewChildren('viewRef', {read: ViewContainerRef})
    public viewRefs: QueryList<ViewContainerRef>;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngAfterViewInit() {
        this.viewRefs.changes.subscribe((list: QueryList<ViewContainerRef>) => {
            list.forEach((viewRef: ViewContainerRef, index: number) => {
                const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(OtherComponent);
                viewRef.createComponent(componentFactory, index);
            });
        });
    }
}

4

dim0_0n 18 फरवरी 2019, 11:44

Question 2

आप DOM से तत्वों या निर्देशों की QueryList प्राप्त करने के लिए ViewChildren का उपयोग कर सकते हैं। जब भी कोई चाइल्ड एलिमेंट जोड़ा जाता है, हटाया जाता है या स्थानांतरित किया जाता है, तो क्वेरी सूची अपडेट की जाएगी, और क्वेरी सूची में देखे जा सकने वाले परिवर्तन एक नया मान उत्सर्जित करेंगे। इसका मतलब है कि आप अपने viewRefs.changes ईवेंट पर सब्सक्रिप्शन बना सकते हैं और ComponentFactoryResolver का उपयोग करके गतिशील रूप से घटकों को लोड कर सकते हैं। . नीचे दिया गया उदाहरण देखें:

export class SomeComponent {
    @ViewChildren('viewRef', {read: ViewContainerRef})
    public viewRefs: QueryList<ViewContainerRef>;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) {
    }

    ngAfterViewInit() {
        this.viewRefs.changes.subscribe((list: QueryList<ViewContainerRef>) => {
            list.forEach((viewRef: ViewContainerRef, index: number) => {
                const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(OtherComponent);
                viewRef.createComponent(componentFactory, index);
            });
        });
    }
}

4

dim0_0n 18 फरवरी 2019, 11:44

ViewChildren में गतिशील घटक जोड़ें

1 उत्तर

संबंधित सवाल

नए सवाल

angular