[javascript] Angular 2에서 <ng-content>가 비어 있는지 확인하는 방법은 무엇입니까?

Program / 글쓴이

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

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