عرض تفاعلي: كيفية إظهار رسالة عندما يكون ng-content فارغًا في Angular 2
To conditionally display content based on whether ng-content
has content or is empty in Angular 2, you can use a combination of ng-content
and template reference variables along with ngIf
directive. Here’s how you can do it:
html
<div #contentWrapper [hidden]="isOpen">
<ng-content>ng-content>
div>
<ng-template #emptyContent>
<p>Display this if ng-content is empty!p>
ng-template>
<ng-container *ngIf="!hasContent; then emptyContent">ng-container>
typescript// app.component.ts
import { Component, AfterContentChecked, ContentChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentChecked {
@ContentChild('contentWrapper') contentWrapper: any;
ngAfterContentChecked() {
this.hasContent = !!this.contentWrapper.nativeElement.textContent.trim();
}
}
In this example, we use a template reference variable #contentWrapper
to refer to the div
containing the ng-content
. We then use *ngIf
with the emptyContent
template to conditionally display the content based on whether ng-content
is empty or not.
-
إزالة الواصلات في Python12/04/2024
-
كيفية تحويل JSON إلى كائن C#12/03/2024
-
تخصيص Pylint في Python: دليل شامل31/01/2024
The ngAfterContentChecked
lifecycle hook is used to check if the ng-content
has any content by checking the text content of the contentWrapper
element. If the text content is empty, hasContent
is set to false, otherwise, it is set to true.
I hope this helps! Let me know if you need further clarification or assistance.
المزيد من المعلومات
لحل المشكلة وإظهار الرسالة “Display this if ng-content is empty!” عندما يكون ng-content
فارغًا، يمكنك استخدام الطريقة التالية:
- إنشاء متغير في الكلاس الخاص بالكومبوننت يُعرف ما إذا كان
ng-content
فارغًا أم لا. - استخدام الدالة
ngAfterContentChecked
للتحقق من حالةng-content
بعد التحديثات. - عرض الرسالة المناسبة استنادًا إلى حالة
ng-content
.
هنا كيفية تنفيذ ذلك في Angular 2:
typescriptimport { Component, AfterContentChecked, ContentChild } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentChecked {
@ContentChild('contentWrapper') contentWrapper: any;
hasContent: boolean = false;
ngAfterContentChecked() {
this.hasContent = !!this.contentWrapper.nativeElement.textContent.trim();
}
}
في هذا المثال، نستخدم @ContentChild('contentWrapper')
للوصول إلى ng-content
الموجود داخل العنصر div
بمساعدة التوصيل بالعنصر contentWrapper
، ثم نستخدم دالة ngAfterContentChecked
لفحص محتوى ng-content
بعد كل تحديث. إذا كان محتوى ng-content
فارغًا، سيتم تعيين قيمة hasContent
إلى false
، وإلا سيتم تعيينها إلى true
.
ثم، يمكننا استخدام هذا المتغير hasContent
في قالب HTML لعرض الرسالة المناسبة:
html<div #contentWrapper [hidden]="isOpen">
<ng-content>ng-content>
div>
<span *ngIf="!hasContent">
<p>Display this if ng-content is empty!p>
span>
بهذا الشكل، سيتم عرض الرسالة “Display this if ng-content is empty!” عندما يكون ng-content
فارغًا.