구성 요소가 있다고 가정합니다.

@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>구성 요소가 비어있는 경우 일부 기본 콘텐츠를 표시하고 싶습니다 . DOM에 직접 액세스하지 않고 쉽게 할 수있는 방법이 있습니까?

ng-contenta와 같은 HTML 요소를 감싸서 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>`

@pixelbits 답변에 누락 된 부분이 있습니다. children부모 템플릿의 줄 바꿈이나 공백으로 인해 children빈 텍스트 \ 줄 바꿈이있는 요소 가 발생하기 때문에 속성 뿐만 아니라 확인해야합니다 . 더 나은이 확인 .innerHTML하고 .trim()그것.

작업 예 :

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

17.03.2020 수정

순수 CSS (2 가지 솔루션)

ng-content에 아무것도 투영되지 않는 경우 기본 콘텐츠를 제공합니다.

가능한 선택자 :

1. :only-child선택자. 여기에서이 게시물을 참조하십시오 : : only-child Selector

   ^{이것은 더 적은 코드 / 마크 업을 필요로합니다. IE 9 이후 지원 : Can I Use : only-child}

2. :empty선택자. 더 읽으십시오.

   ^{IE 9 및 부분적으로 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;
}

작동하지 않는 경우

공백이 하나 이상 있으면 비어 있지 않은 것으로 간주됩니다. Angular는 공백을 제거하지만 그렇지 않은 경우를 대비합니다.

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

또는

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

콘텐츠를 삽입 할 때 참조 변수를 추가합니다.

<div #content>Some Content</div>

구성 요소 클래스에서 @ContentChild ()를 사용하여 삽입 된 콘텐츠에 대한 참조를 가져옵니다.

@ContentChild('content') content: ElementRef;

구성 요소 템플릿에서 콘텐츠 변수에 값이 있는지 확인할 수 있습니다.

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

주사 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...
}

(검증되지 않은)

기본 콘텐츠를 표시하려면 CSS의 'only-child'선택기를 사용하지 마십시오.

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

예 : HTML

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

CSS

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

제 경우에는 빈 ng-content의 부모를 숨겨야합니다.

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

간단한 CSS 작동 :

.wrapper {
  display: inline-block;

  &:empty {
    display: none;
  }
}

@ContentChildren 을 사용하여 솔루션을 구현했습니다. 데코레이터 의 답변과 유사합니다.

문서 에 따르면 이 데코레이터는 다음과 같습니다.

콘텐츠 DOM에서 요소 또는 지시문의 QueryList를 가져옵니다. 자식 요소가 추가, 제거 또는 이동할 때마다 쿼리 목록이 업데이트되고 쿼리 목록에서 관찰 가능한 변경 사항이 새 값을 생성합니다.

따라서 상위 구성 요소에 필요한 코드는 다음과 같습니다.

<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

Angular 10에서는 약간 변경되었습니다. 다음을 사용합니다.

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