angular - एक घटक में उपयोग किए जाने वाले निर्देश का संदर्भ प्राप्त करें




angular2-directives angular-template (2)

आप exportAs @Directive एनोटेशन के exportAs प्रॉपर्टी का उपयोग कर सकते हैं। यह मूल दृश्य में उपयोग किए जाने वाले निर्देश को निर्यात करता है। मूल दृश्य से, आप इसे दृश्य चर में बाँध सकते हैं और @ViewChild() का उपयोग करके इसे मूल वर्ग से एक्सेस कर सकते हैं।

plunker साथ उदाहरण:

@Directive({
  selector:'[my-custom-directive]',
  exportAs:'customdirective'   //the name of the variable to access the directive
})
class MyCustomDirective{
  logSomething(text){
    console.log('from custom directive:', text);
  }
}

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div #cdire=customdirective my-custom-directive>Some content here</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') element;

  ngAfterViewInit(){
    this.element.logSomething('text from AppComponent');
  }
}

अद्यतन करें

जैसा कि टिप्पणियों में उल्लेख किया गया है, उपरोक्त दृष्टिकोण का एक और विकल्प है।

exportAs का उपयोग करने के बजाय, कोई सीधे @ViewChild(MyCustomDirective) या @ViewChildren(MyCustomDirective) उपयोग कर सकता है

यहाँ तीन दृष्टिकोणों के बीच अंतर प्रदर्शित करने के लिए कुछ कोड दिए गए हैं:

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') secondMyCustomDirective; // Second
  @ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ViewChild(MyCustomDirective) firstMyCustomDirective; // First

}

अद्यतन करें

अधिक स्पष्टीकरण के साथ एक और प्लंकर

मेरे पास एक घटक है जिसका टेम्पलेट कुछ इस तरह दिखता है:

<div [my-custom-directive]>Some content here</div>

मुझे यहां उपयोग किए जाने वाले MyCustomDirective वर्ग के उदाहरण तक पहुंचने की आवश्यकता है। जब मैं एक बच्चे के घटक तक पहुंच प्राप्त करना चाहता हूं, तो मैं एक ViewChild क्वेरी का उपयोग करता ViewChild

क्या बच्चे के निर्देशन तक पहुँच पाने के लिए एक समान सुविधा है?


ऐसा प्रतीत होता है कि @ अब्दुलरहमान के उत्तर के बाद से, निर्देशों को अब @ViewChild या @ViewChildren से एक्सेस नहीं किया जा सकता क्योंकि ये केवल DOM एलिमेंट पर ही आइटम पास करते हैं।

इसके बजाय, आपको @ContentChild / @ContentChildren का उपयोग करके निर्देशों का उपयोग करना चाहिए।

@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ContentChild('cdire') secondMyCustomDirective; // Second
  @ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}

@Component विशेषता पर भी अब कोई directives गुण नहीं है।





angular-template