angular - गतिशील रूप से एक निर्देश कैसे जोड़ें?



typescript angular2-directives (1)

मेजबान में एक निर्देश को गतिशील रूप से कैसे जोड़ें ( इंजेक्ट करें )?

मेरे पास एक myTooltip निर्देश है और मैं इसे होस्ट करने के लिए mdTooltip निर्देश जोड़ना चाहूंगा। मैंने ElementRef.nativeElement की setAttribute() की कोशिश की setAttribute() , लेकिन यह mdTooltip निर्देश नहीं बनाता है।

mytooltip.directive.ts:

@Directive({
  selector: '[my-tooltip]',
  host: {
    '(mouseenter)': 'show()',
    '(mouseleave)': 'hide()',
  }
})
export class myTooltip {
  @Input('my-tooltip') message;

  constructor() { }

  show() {
    /* TODO: How to add md-tooltip directive to elementref (host)? */
  }

  hide() {
    /* TODO: remove md-tooltip directive from elementref (host) */
  }
}

होस्ट द्वारा मेरा मतलब है कि तत्व जिसमें myTooltip निर्देश है:

<span my-tooltip="tooltip hint">Click here</span>

परिणाम html से ऊपर नहीं बदलेगा, लेकिन माउसेंटर पर यह स्पान में md-टूलटिप निर्देशन होगा।

BTW, कारण मैं एक आवरण का उपयोग कर रहा हूं और सीधे md-टूलटिप नहीं है कि मैं बाद में देरी दिखा रहा हूं, देरी को छिपा रहा हूं और अन्य साधनों में भी सामग्री टूलटिप के व्यवहार को अनुकूलित करना चाहता हूं।

वर्तमान में गतिशील रूप से निर्देशन को जोड़ने का वर्तमान में समर्थन नहीं किया गया है :( मुझे लगता है कि यह प्रश्न अभी भी यहाँ होना चाहिए क्योंकि यह सामग्री टीम अपडेट करती है


यह एक विशेषता है जिसे हम कोणीय में पूछ रहे हैं ... इसे पढ़ें: https://github.com/angular/angular/issues/8785

इसका उपयोग करने का एक त्वरित और गंदा तरीका है:

मेरे पास myHilite नाम का एक निर्देश है (पाठ को उजागर करने के लिए), मेरे पास MainComponent.ts नाम का एक घटक भी है। MainComponent.ts मैंने कोड की यह पंक्ति जोड़ी है ...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite();
} 

यदि आपके निर्देश में मापदंडों की आवश्यकता है ...

export class MainComponent {
    @HostBinding('attr.myHilite') myHiliteDirective = new myHilite(this.elementRef);
}

आपके निर्देश को अपने जीवन चक्र हुक में से एक में कोड निष्पादित करने की आवश्यकता हो सकती है, मैन्युअल रूप से इस तरह के मूल घटक जीवन चक्र हुक विधि में निर्देश के जीवनचक्र हुक विधि को कॉल करें ...

export class MainComponent {
    //...code...

    ngOnInit(){
        this.myHiliteDirective.ngOnInit();
    }
}




angular2-directives