angular - কোনও উপাদানটিতে ব্যবহৃত কোনও নির্দেশকের রেফারেন্স পান




angular2-directives angular-template (2)

আমার এমন একটি উপাদান রয়েছে যার টেমপ্লেটটি এরকম দেখতে কিছুটা লাগে:

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

আমার এখানে ব্যবহৃত MyCustomDirective শ্রেণীর উদাহরণটিতে অ্যাক্সেস দরকার। আমি যখন কোনও সন্তানের উপাদানটিতে অ্যাক্সেস পেতে চাই তখন আমি একটি ViewChild কোয়েরি ব্যবহার করি।

কোনও শিশু নির্দেশিকায় অ্যাক্সেস পাওয়ার জন্য কি সমতুল্য বৈশিষ্ট্য রয়েছে?


আপনি 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) @ViewChild(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

}

হালনাগাদ

আরও স্পষ্টতা সহ আরও একটি প্লাঙ্কার


এটি প্রদর্শিত হয় যে @ @ViewChild @ViewChildren @ViewChild @ViewChildren কেবল এই আইটেমগুলি পাস করার কারণে @ @ViewChild বা @ViewChildren @ViewChild কাছ থেকে নির্দেশিকা আর অ্যাক্সেস করা যাবে না।

পরিবর্তে, আপনাকে অবশ্যই @ContentChildren @ContentChild / @ContentChildren @ContentChild ব্যবহার করে নির্দেশিকা অ্যাক্সেস করতে হবে।

@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 অ্যাট্রিবিউটে আর কোনও ডিরেক্টরি সম্পত্তি নেই।





angular-template