📛 📢 👩🏼‍🤝‍👨🏻 कोणीय या खोई गैर-सामग्री प्रलेखन में प्रोजेक्टिंग सामग्री ⏭️ 🐸 👩🏽‍🏫

जब कोणीय सीखते हैं, तो बहुत बार वे याद करते हैं या सामग्री के प्रक्षेपण के रूप में इस तरह की अवधारणा पर पर्याप्त ध्यान नहीं देते हैं। यह लचीला और पुन: प्रयोज्य घटकों को बनाने के लिए एक बहुत शक्तिशाली उपकरण है। लेकिन इसके दस्तावेज़ीकरण में केवल जीवनचक्र के हुक अनुभाग में कुछ पैराग्राफों का उल्लेख है । आइए इस चूक को ठीक करने का प्रयास करें।

गैर-सामग्री का उपयोग करके प्रोजेक्टिंग सामग्री

सामग्री प्रक्षेपण एक घटक के बाहर से HTML सामग्री को आयात करने और एक विशिष्ट स्थान पर एक घटक टेम्पलेट में पेस्ट करने का एक तरीका है। (प्रलेखन का मुफ्त अनुवाद)

परिभाषा बल्कि जटिल है, लेकिन वास्तव में सब कुछ बहुत सरल है। हमारे पास कुछ प्रकार के घटक हैं, और इसके उद्घाटन और समापन टैग के बीच सब कुछ सामग्री है।

<app-parent>
    <!-- content -->
    I'm content!
    <!-- content -->
</app-parent>

और कोणीय आपको किसी तत्व का उपयोग करके किसी भी HTML कोड (सामग्री) को इस घटक के टेम्पलेट में एम्बेड करने की अनुमति देता है ng-content।

आइए यह जानने की कोशिश करें कि इसकी आवश्यकता क्यों है और यह एक उदाहरण के साथ कैसे काम करता है। मान लीजिए कि हमारे पास एक साधारण बटन घटक है। इस बटन का पाठ हम टेम्पलेट के माध्यम से पास करते हैं input property।

// button.component.ts
import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-button',
  template: '<button>{{text}}</button>'
})
export class ButtonComponent {
  @Input() text: string;
}

// app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-button [text]="'Button'"></app-button>`,
})
export class AppComponent {
}

यह अच्छा लग रहा है। लेकिन अचानक हमें कुछ बटन के लिए पाठ में एक आइकन जोड़ने की आवश्यकता थी। हमारे पास पहले से ही एक आइकन घटक है। आपको बस इसे बटन टेम्पलेट में जोड़ना होगा, एक निर्देश संलग्न करना होगा ngIfऔर input propertyआइकन के गतिशील प्रदर्शन के लिए एक और लिखना होगा ।

// icon.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-icon',
  template: '☻',
})
export class IconComponent {
}

// button.component.ts
import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button>
               <app-icon *ngIf="showIcon"></app-icon>
               {{text}}
             </button>`,
})
export class ButtonComponent {
  @Input() text: string;
  @Input() showIcon = true;
}

सब कुछ काम कर रहा है। लेकिन क्या होता है अगर आपको पाठ के सापेक्ष आइकन का स्थान बदलने की आवश्यकता होती है? या एक और नया आइटम जोड़ें? आपको मौजूदा कोड को एडिट करना होगा, नई प्रॉपर्टीज आदि जोड़ना होगा।

इन सब से बचा जा सकता है ng-content। इसे सामग्री के लिए प्लेसहोल्डर माना जा सकता है। यह वह सब कुछ प्रदर्शित करता है जो आप घटक के खुलने और बंद होने के टैग के बीच रखते हैं।

// button.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button>
               <ng-content></ng-content>
             </button>`,
})
export class ButtonComponent {
}

// app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-button>
               <app-icon></app-icon>
               Button
             </app-button>`,
})
export class AppComponent {
}

Stackblitz कोड

अब, अगर हमें एक आइकन बटन की आवश्यकता है, तो हम बस बटन टैग के बीच आइकन घटक डालते हैं। आप कुछ भी और कुछ भी जोड़ सकते हैं। क्या वह स्वर्ग नहीं है? हमारा बटन घटक लचीला और सुंदर हो गया है।

एनजी-कंटेंट के लिए चयन विशेषता क्या भूमिका निभाती है?

कभी-कभी हमें बाकी सामग्री के सापेक्ष एक निश्चित स्थान पर कुछ सामग्री की व्यवस्था करने की आवश्यकता होती है, इस मामले में हम एक विशेषता का उपयोग कर सकते हैं जो selectएक चयनकर्ता ( .some-class, some-tag, [some-attr]) को स्वीकार करता है ।

// button.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button>
               <ng-content></ng-content>
               <div>
                 <ng-content select="app-icon"></ng-content>
               </div>
             </button>`,
})
export class ButtonComponent {
}

स्टैकब्लिट्ज़ कोड

अब आइकन हमेशा नीचे दिखाया जाता है, बाकी सामग्री की परवाह किए बिना। Perfecto!

NgProjectAs क्या है?

selectY विशेषता ng-contentउन टैग्स से मेल खाती है जो मूल घटक के नेस्टिंग के पहले स्तर पर हैं। लेकिन क्या होता है अगर हम एक टैग में एक आइकन घटक के लिए घोंसले के शिकार के स्तर को बढ़ाते हैं?

// app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-button>
               <ng-container>
                 <app-icon></app-icon>
               </ng-container>
               Button
             </app-button>`
})
export class AppComponent {}

हम देखेंगे कि यह selectकाम नहीं करता है, जैसे कि यह बिल्कुल भी मौजूद नहीं है। ऐसा इसलिए होता है क्योंकि यह <ng-content select="...">माता-पिता की सामग्री के घोंसले के पहले स्तर पर ही खोज करता है। इस समस्या को हल करने के लिए एक विशेषता है ngProjectAs। यह चयनकर्ता और इसके अंतर्गत संपूर्ण DOM नोड को "मास्क" करता है।

// app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<app-button>
               <ng-container ngProjectAs="app-icon">
                 <app-icon></app-icon>
               </ng-container>
               Button
             </app-button>`
})
export class AppComponent {}

स्टैकब्लिट्ज कोड

केस * ngIf + एनजी-कंटेंट

आइए हम एक और दिलचस्प मामले की जांच करें। मान लीजिए हमें छिपाने / शो आइकन बटन पर क्लिक करने की आवश्यकता है। बटन घटक वर्ग के लिए एक बूलियन संपत्ति जोड़ें जो आइकन प्रदर्शित करने के लिए जिम्मेदार है, इसे बटन पर क्लिक करके बदल दें और इसे लटका दें ngIf।

// button.component.ts
import {Component, Input} from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button (click)="toggleIcon()">
               <ng-content></ng-content>
               <div *ngIf="showIcon">
                 <ng-content select="app-icon"></ng-content>
               </div>
             </button>`,
})
export class ButtonComponent {
  showIcon = true;

  toggleIcon() {
    this.showIcon = !this.showIcon;
  }
}

आइकन छिपा है / क्लिक करके प्रकट होता है। ठीक! लेकिन हुक के लिए कुछ लॉग जोड़ने OnInitऔर OnDestroyआइकन घटक के लिए। यह एक सर्वविदित तथ्य है कि एक निर्देश, ngIfजब किसी स्थिति को बदला जाता है, एक तत्व को पूरी तरह से हटा देता है / बनाता है, और OnDestroy/ इस OnInitसमय के अनुसार काम करना चाहिए।

// icon.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-icon',
  template: '☻',
})
export class IconComponent implements OnInit, OnDestroy {
  ngOnInit() {
    console.log('app-icon init');
  }

  ngOnDestroy() {
    console.log('app-icon destroy')
  }
}

Stackblitz पर कोड

हम बटन पर क्लिक करते हैं, यह सुनिश्चित करें कि आइकन गायब हो जाता है और फिर प्रकट होता है। फिर हम अपने प्रतिष्ठित लॉग को देखने की उम्मीद में डेवलपर के कंसोल पर जाते हैं, हालांकि ... वे नहीं हैं!

एक घटक बनाने के लिए केवल एक लॉग है। यह पता चला है कि हमारा आइकन घटक कभी नष्ट नहीं हुआ है, लेकिन बस छिपा हुआ है। ये क्यों हो रहा है?

ng-content यह नई सामग्री नहीं बनाता है, यह केवल मौजूदा लोगों को प्रोजेक्ट करता है। इसलिए, जिस घटक में सामग्री घोषित की गई है, वह निर्माण और हटाने के लिए जिम्मेदार है। मेरे लिए यह पूरी तरह से गैर-स्पष्ट क्षण था। आइए हमारे समाधान को ठीक करें ताकि यह शुरू में अपेक्षित रूप से काम करे।

// button.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-button',
  template: `<button>
                <ng-content></ng-content>
                <ng-content select="app-icon"></ng-content>
             </button>`,
})
export class ButtonComponent {
}

// app.component.ts
import { Component } from "@angular/core";

@Component({
  selector: 'app-root',
  template: `<app-button (click)="toggleIcon()">
              <div *ngIf="showIcon" ngProjectAs="app-icon">
                <app-icon></app-icon>
              </div>
              Button
            </app-button>`,
})
export class AppComponent {
  showIcon = true;

  toggleIcon() {
    this.showIcon = !this.showIcon;
  }
}

स्टैकब्लिट्ज़ पर कोड

ने लॉग्स खोले हैं, हम देख सकते हैं कि आइकन का घटक बनाया गया है और इसे हटा दिया जाना चाहिए।

एक निष्कर्ष के बजाय

मुझे उम्मीद है कि इस लेख ने आपको कोणीय में सामग्री को पेश करने में थोड़ी मदद की है।
यह मेरे लिए स्पष्ट रूप से समझ से बाहर है कि आधिकारिक दस्तावेज ने इस विषय को क्यों नजरअंदाज किया। एंगुलर रिपॉजिटरी ने 2017 से इस मुद्दे को लटका दिया है । जाहिर है, कोणीय टीम के पास करने के लिए अधिक महत्वपूर्ण चीजें हैं।

कोणीय या खोई गैर-सामग्री प्रलेखन में प्रोजेक्टिंग सामग्री

गैर-सामग्री का उपयोग करके प्रोजेक्टिंग सामग्री

एनजी-कंटेंट के लिए चयन विशेषता क्या भूमिका निभाती है?

NgProjectAs क्या है?

केस * ngIf + एनजी-कंटेंट

एक निष्कर्ष के बजाय

More articles: