☰

確認方法 空ですか？（Angular 2+では今のところ）質問する

tag-icon • tag-icon javascript angular
確認方法 空ですか？（Angular 2+では今のところ）質問する

次のようなコンポーネントがあるとします。

@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 に直接アクセスせずにこれを行う簡単な方法はありますか?

ベストアンサー1

ng-contentのような HTML 要素でラップしてdivローカル参照を取得し、ngIf式を にバインドしますref.children.length == 0。

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

Angular 12 用に更新されました。古いロジック (" ref.nativeElement.childNodes.length") では、現在nativeElementと同様にエラーが発生しますundefined。

おすすめ記事