javascript - 在Angular 2中如何检查是否 <ng-content> 是空的？(In Angular 2 how to check whether <ng-content> is empty?)

Question

Suppose I have a component:(假设我有一个组件：)

@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 { } Now, I would like to display some default content if <ng-content> for this component is empty.(现在，如果此组件的<ng-content>为空，我想显示一些默认内容。) Is there an easy way to do this without accessing the DOM directly?(是否有一种简单的方法可以执行此操作而无需直接访问DOM？)   ask by Slawomir Dadas translate from so

Answer 1

Wrap ng-content in an HTML element like a div to get a local reference to it, then bind the ngIf expression to ref.children.length == 0 :(将ng-content包裹在div类的HTML元素中以获取对其的本地引用，然后将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>`