ฉันได้ใช้วิธีแก้ปัญหาโดยใช้มัณฑนากร@ContentChildrenซึ่งคล้ายกับคำตอบของ @ Lerner
ตามเอกสารมัณฑนากรนี้:
รับ QueryList ขององค์ประกอบหรือคำสั่งจาก 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(() => {
this.hasContent = (this.content.length > 0);
});
}
ngOnDestroy() {
this._subscription.unsubscribe();
}
}
ตัวอย่างเต็ม : https://stackblitz.com/edit/angular-essvnq