ধরুন আমার একটি উপাদান রয়েছে:
@Component({
selector: 'MyContainer',
template: `
<div class="container">
<!-- some html skipped -->
<ng-content></ng-content>
<span *ngIf="????">Display this if ng-content is empty!</span>
<!-- some html skipped -->
</div>`
})
export class MyContainer {
}
এখন, আমি <ng-content>এই উপাদানটির জন্য খালি থাকলে কিছু ডিফল্ট সামগ্রী প্রদর্শন করতে চাই । ডমকে সরাসরি অ্যাক্সেস না করে এটি করার কী সহজ উপায় আছে?
উত্তর:
এর ng-contentমতো কোনও divস্থানীয় রেফারেন্স পেতে কোনও এইচটিএমএল উপাদানটিকে মোড়ক করুন, তারপরে এই ngIfঅভিব্যক্তিটি আবদ্ধ করুন ref.children.length == 0:
template: `<div #ref><ng-content></ng-content></div>
<span *ngIf="ref.nativeElement.childNodes.length == 0">
Display this if ng-content is empty!
</span>`
ref.children.length। চাইল্ডনোডগুলিতে textনোডগুলি থাকবে যদি আপনি স্থান বা নতুন লাইনের সাথে আপনার এইচটিএমএল ফর্ম্যাট করেন তবে শিশুরা এখনও খালি থাকবে।
ref.childNodes.length == 0বদলে উদাহরণটি ব্যবহার না করা অবধি এই কাজ করছে বলে মনে হচ্ছে না ref.children.length == 0। আপনি যদি সামঞ্জস্যপূর্ণ উত্তরটি সম্পাদনা করতে পারেন তবে এটি একগুচ্ছকে সহায়তা করবে। সহজ ভুল, আপনাকে ধর্ষণ করা নয়। :)
!ref.hasChildNodes()তার পরিবর্তে ব্যবহার করেছিref.nativeElement.childNodes.length == 0
@ পিক্সেলবিটের উত্তরে কিছু অনুপস্থিত। আমাদের কেবল childrenসম্পত্তিটিই পরীক্ষা করা দরকার , কারণ প্যারেন্ট টেমপ্লেটে যে কোনও লাইন ব্রেক বা স্পেস childrenফাঁকা পাঠ্য \ লাইন ব্রেকগুলির সাথে উপাদান তৈরি করে। চেক করা ভাল .innerHTMLএবং .trim()এটি।
কাজের উদাহরণ:
<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
Content if empty
</span>
element.children.length বা element.childnodes.length।
সম্পাদনা 17.03.2020
কোনও কিছুই এনজি-কনটেন্টে প্রজেক্ট না করা থাকলে ডিফল্ট সামগ্রী সরবরাহ করে।
:only-childনির্বাচক। এখানে এই পোস্টটি দেখুন :: একমাত্র শিশু নির্বাচক
এটির জন্য কম কোড / মার্কআপ প্রয়োজন। আইই 9 এর পরে থেকে সমর্থন: আমি কি ব্যবহার করতে পারি: কেবলমাত্র শিশু
:emptyনির্বাচক শুধু আরও পড়ুন।
আইই 9 এবং আংশিক আই 7/8 থেকে সমর্থন: https://caniuse.com/#feat=css-sel3
<div class="wrapper">
<ng-content select="my-component"></ng-content>
</div>
<div class="default">
This shows something default.
</div>
.wrapper:not(:empty) + .default {
display: none;
}
যদি এটি কাজ করে না
সচেতন থাকুন, কমপক্ষে একটি সাদা জায়গা থাকা খালি মৌমাছি না বলে বিবেচিত হয়। কৌণিক সাদা স্থান সরিয়ে দেয়, তবে কেবল যদি তা না হয়:
<div class="wrapper"><!--
--><ng-content select="my-component"></ng-content><!--
--></div>
বা
<div class="wrapper"><ng-content select="my-component"></ng-content</div>
emptyসিএসএস সিউডোক্লাস ছিল
<loader [data]="allDataWeNeed"> <desired-component *loadingRender><desired-component> <other-default-component *renderWhenEmptyResult></other-default-component> </loader>এবং লোডিং উপাদানটিতে আপনি পারফরম্যান্স লোডিং বোঝাতে পারবেন, যখন ডেটা লোড হচ্ছে। আপনি বিভিন্নভাবে এটি লিখতে / সমাধান করতে পারেন। এটি কীভাবে আপনি এটি সমাধান করতে পারেন তা এটি একটি প্রদর্শন।
আপনি যখন সামগ্রীটি ইনজেক্ট করবেন তখন একটি রেফারেন্স ভেরিয়েবল যুক্ত করুন:
<div #content>Some Content</div>
এবং আপনার উপাদান শ্রেণিতে @ কনটেন্টচিল্ড () এর সাথে ইনজেকশনযুক্ত সামগ্রীর একটি রেফারেন্স পান
@ContentChild('content') content: ElementRef;
সুতরাং আপনার উপাদান টেমপ্লেটে আপনি সামগ্রী ভেরিয়েবলের কোনও মান আছে কিনা তা পরীক্ষা করতে পারেন
<div>
<ng-content></ng-content>
<span *ngIf="!content">
Display this if ng-content is empty!
</span>
</div>
<MyContainer></MyContainer>। আপনার সমাধান ব্যবহারকারীদের একটি উপ-উপাদান MyContainer অধীনে তৈরি করতে প্রত্যাশা করে: <MyContainer><div #content></div></MyContainer>। যদিও এটি একটি সম্ভাবনা, আমি এটি উচ্চতর বলব না।
ইনজেকশন দিন elementRef: ElementRefএবং elementRef.nativeElementকোনও সন্তান আছে কিনা তা পরীক্ষা করুন । এটি শুধুমাত্র সাথে কাজ করতে পারে encapsulation: ViewEncapsulation.Native।
<ng-content>ট্যাগটি মোড়ানো এবং এটির কোন সন্তান আছে কিনা তা পরীক্ষা করে দেখুন। এটি দিয়ে কাজ করে না encapsulation: ViewEncapsulation.Native।
<div #contentWrapper>
<ng-content></ng-content>
</div>
এবং এটির কোন সন্তান আছে কিনা তা পরীক্ষা করে দেখুন
@ViewChild('contentWrapper') contentWrapper;
ngAfterViewInit() {
contentWrapper.nativeElement.childNodes...
}
(পরীক্ষিত না)
@ViewChild। "আইনী" থাকাকালীন ভিউচিল্ড কোনও টেমপ্লেটের মধ্যে চাইল্ড-নোডগুলি অ্যাক্সেসের জন্য ব্যবহার করা উচিত নয়। এটি একটি অ্যান্টিপ্যাটার্ন কারণ, যদিও বাবা-মা শিশুদের সম্পর্কে জানতে পারেন তবে তাদের সাথে তাদের দম্পতি হওয়া উচিত নয় কারণ এটি সাধারণত প্যাথলজিকাল কাপলিংয়ের দিকে নিয়ে যায় ; ডেটা-ট্রান্সপোর্ট বা অনুরোধ-হ্যান্ডলিংয়ের আরও উপযুক্ত ফর্ম হ'ল ইভেন্ট-চালিত পদ্ধতিগুলি ব্যবহার করা ।
@ViewChild। আমার মন্তব্যে কিছুটা ভারসাম্য যুক্ত করার জন্য ধন্যবাদ - আমি আমাদের উভয় মন্তব্যকে অন্যের মতো বিবেচনার জন্য উপযুক্ত বলে মনে করি।
@ViewChild()এই নামটি থেকেই আসে। "বাচ্চারা" অগত্যা বাচ্চাদের নয়, তারা কেবলমাত্র উপাদানটির ঘোষণামূলক অংশ (যেমনটি আমি দেখছি)। যদি এই মার্কআপের জন্য তৈরি উপাদানগুলির উদাহরণগুলি অ্যাক্সেস হয় তবে এটি অবশ্যই আলাদা গল্প story এটি একটি খুব আকর্ষণীয় আলোচনা। এটি আমাকে চিন্তিত করে যে এই ধরণের বিষয়ে চিন্তা করার মতো পর্যাপ্ত সময় আমার কাছে নেই কারণ এই জাতীয় ফ্রেমওয়ার্কগুলির সাথে খুব বেশি সময় কোনও উপায় খুঁজে পাওয়ার জন্য খুব বেশি সময় নষ্ট হয়।
আপনি যদি কোনও ডিফল্ট সামগ্রী প্রদর্শন করতে চান তবে আপনি কেবল CSS থেকে 'একমাত্র-সন্তানের' নির্বাচককে কেন ব্যবহার করবেন না।
https://www.w3schools.com/cssref/sel_only-child.asp
যেমন: এইচটিএমএল
<div>
<ng-content></ng-content>
<div class="default-content">I am deafult</div>
</div>
সিএসএস
.default-content:not(:only-child) {
display: none;
}
আমি @ কনটেন্টচিল্ডেন ডেকরেটার ব্যবহার করে একটি সমাধান কার্যকর করেছি , এটি @ লার্নারের উত্তরের মতোই।
ডক্স অনুসারে , এই সাজসজ্জা:
DOM বিষয়বস্তু থেকে উপাদান বা নির্দেশের কোয়েরি তালিকা পান। যে কোনও সময় কোনও শিশু উপাদান যুক্ত করা, অপসারণ বা সরানো হলে ক্যোয়ারী তালিকা আপডেট করা হবে এবং কোয়েরি তালিকার পর্যবেক্ষণযোগ্য পরিবর্তনগুলি একটি নতুন মান নির্গত করবে।
সুতরাং প্যারেন্ট উপাদানগুলির প্রয়োজনীয় কোডটি হ'ল:
<app-my-component>
<div #myComponentContent>
This is my component content
</div>
</app-my-component>
উপাদান শ্রেণিতে:
@ContentChildren('myComponentContent') content: QueryList<ElementRef>;
তারপরে, উপাদান টেমপ্লেটে:
<div class="container">
<ng-content></ng-content>
<span *ngIf="*ngIf="!content.length""><em>Display this if ng-content is empty!</em></span>
</div>
পুরো উদাহরণ : https://stackblitz.com/edit/angular-jjjdqb
আমি এই সমাধান, কৌণিক উপাদান বাস্তবায়িত জন্য পেয়েছি matSuffix, এ ফর্ম-ক্ষেত্র অংশটি।
পরে যখন উপাদানটির বিষয়বস্তু ইনজেক্ট করা হয়, অ্যাপটি শুরু করার পরে , আমরা এছাড়াও এর changesইভেন্টটির সাবস্ক্রাইব করে একটি প্রতিক্রিয়াশীল প্রয়োগ করতে পারি QueryList:
export class MyComponentComponent implements AfterContentInit, OnDestroy {
private _subscription: Subscription;
public hasContent: boolean;
@ContentChildren('myComponentContent') content: QueryList<ElementRef>;
constructor() {}
ngAfterContentInit(): void {
this.hasContent = (this.content.length > 0);
this._subscription = this.content.changes.subscribe(() => {
// do something when content updates
//
this.hasContent = (this.content.length > 0);
});
}
ngOnDestroy() {
this._subscription.unsubscribe();
}
}
সম্পূর্ণ উদাহরণ : https://stackblitz.com/edit/angular-essvnq