Giả sử tôi có một thành phần:

@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 {
}

Bây giờ, tôi muốn hiển thị một số nội dung mặc định nếu <ng-content>thành phần này trống. Có cách nào dễ dàng để thực hiện việc này mà không cần truy cập trực tiếp vào DOM không?

Bao bọc ng-contentmột phần tử HTML như a divđể nhận tham chiếu cục bộ đến nó, sau đó liên kết ngIfbiểu thức với 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>`

Có một số bị thiếu trong câu trả lời @pixelbits. Chúng tôi không chỉ cần kiểm tra thuộc childrentính, vì bất kỳ ngắt dòng hoặc khoảng trắng nào trong mẫu mẹ sẽ gây ra childrenphần tử có dấu ngắt dòng văn bản trống. Tốt hơn để kiểm tra .innerHTMLvà .trim()nó.

Ví dụ làm việc:

<span #ref><ng-content></ng-content></span>
<span *ngIf="!ref.innerHTML.trim()">
    Content if empty
</span>

CHỈNH SỬA 17.03.2020

CSS thuần túy (2 giải pháp)

Cung cấp nội dung mặc định nếu không có gì được chiếu vào ng-content.

Các bộ chọn có thể có:

1. :only-childbộ chọn. Xem bài đăng này tại đây :: only-child Selector

   ^{Cái này yêu cầu ít mã / đánh dấu hơn. Hỗ trợ kể từ IE 9: Tôi có thể sử dụng: only-child}

2. :emptybộ chọn. Chỉ cần đọc thêm.

   ^{Hỗ trợ từ IE 9 và một phần kể từ IE 7/8: https://caniuse.com/#feat=css-sel3}

HTML

<div class="wrapper">
    <ng-content select="my-component"></ng-content>
</div>
<div class="default">
    This shows something default.
</div>

CSS

.wrapper:not(:empty) + .default {
    display: none;
}

Trong trường hợp nó không hoạt động

Hãy lưu ý rằng có ít nhất một khoảng trắng được coi là không trống. Angular loại bỏ khoảng trắng, nhưng chỉ trong trường hợp không có:

<div class="wrapper"><!--
    --><ng-content select="my-component"></ng-content><!--
--></div>

hoặc là

<div class="wrapper"><ng-content select="my-component"></ng-content</div>

Khi bạn chèn nội dung, hãy thêm một biến tham chiếu:

<div #content>Some Content</div>

và trong lớp thành phần của bạn nhận được một tham chiếu đến nội dung được đưa vào với @ContentChild ()

@ContentChild('content') content: ElementRef;

vì vậy trong mẫu thành phần của bạn, bạn có thể kiểm tra xem biến nội dung có giá trị

<div>
  <ng-content></ng-content>
  <span *ngIf="!content">
    Display this if ng-content is empty!
  </span>    
</div> 

Tiêm elementRef: ElementRefvà kiểm tra xem elementRef.nativeElementcó con nào không. Điều này có thể chỉ hoạt động với encapsulation: ViewEncapsulation.Native.

Quấn <ng-content>thẻ và kiểm tra xem thẻ có con không. Điều này không hoạt động với encapsulation: ViewEncapsulation.Native.

<div #contentWrapper>
  <ng-content></ng-content>
</div>

và kiểm tra xem nó có con nào không

@ViewChild('contentWrapper') contentWrapper;

ngAfterViewInit() {
  contentWrapper.nativeElement.childNodes...
}

(không thử nghiệm)

Nếu bạn muốn hiển thị nội dung mặc định, tại sao bạn không sử dụng bộ chọn 'only-child' từ css.

https://www.w3schools.com/cssref/sel_only-child.asp

ví dụ: HTML

<div>
  <ng-content></ng-content>
  <div class="default-content">I am deafult</div>
</div>

css

.default-content:not(:only-child) {
   display: none;
}

Trong trường hợp của tôi, tôi phải ẩn phụ huynh của ng-content trống:

<span class="ml-1 wrapper">
  <ng-content>
  </ng-content>
</span>

Css đơn giản hoạt động:

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

Tôi đã triển khai một giải pháp bằng cách sử dụng @ContentChildren decorator, bằng cách nào đó tương tự như câu trả lời của @ Lerner.

Theo tài liệu , người trang trí này:

Nhận QueryList của các phần tử hoặc chỉ thị từ DOM nội dung. Bất kỳ khi nào một phần tử con được thêm, xóa hoặc di chuyển, danh sách truy vấn sẽ được cập nhật và những thay đổi có thể quan sát được của danh sách truy vấn sẽ tạo ra một giá trị mới.

Vì vậy, mã cần thiết trong thành phần mẹ sẽ là:

<app-my-component>
  <div #myComponentContent>
    This is my component content
  </div>
</app-my-component>

Trong lớp thành phần:

@ContentChildren('myComponentContent') content: QueryList<ElementRef>;

Sau đó, trong mẫu thành phần:

<div class="container">
  <ng-content></ng-content>
  <span *ngIf="*ngIf="!content.length""><em>Display this if ng-content is empty!</em></span>
</div>

Ví dụ đầy đủ : https://stackblitz.com/edit/angular-jjjdqb

Tôi đã tìm thấy giải pháp này được triển khai trong các thành phần góc cạnh matSuffix, trong trường biểu mẫu thành phần .

Trong trường hợp nội dung của thành phần được đưa vào sau này, sau khi ứng dụng được khởi chạy, chúng tôi cũng có thể sử dụng triển khai phản ứng, bằng cách đăng ký changessự kiện của 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();
  }

}

Ví dụ đầy đủ : https://stackblitz.com/edit/angular-essvnq

Với Angular 10, nó đã thay đổi một chút. Bạn sẽ sử dụng:

<div #ref><ng-content></ng-content></div> 
<span *ngIf="ref.children.length == 0">
  Display this if ng-content is empty!
</span>