在Angular2中，如何检测到是否有任何ng-content

Question

plnkr演示

@Component({
  selector: 'my-demo',
  template: `This is <ng-content select=".content"></ng-content>`
})
export class DemoComponent { name = 'Angular'; }
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
    <my-demo><div class="content">In Content</div></my-demo>
  `
})
export class AppComponent { name = 'Angular'; }

我想有条件的ng-content，例如

<ng-template *ngIf='hasContent(".content"); else noContent'>
This is <ng-content select=".content"></ng-content>
</ng-template>
<ng-template #noContent>No content</ng-template>

Angular2？

Answer 1

günterZöchbauer的解决方案是可以接受的，不会影响使用情况，让组件检测到这一点，我还找到了一种更简单的方法来执行此操作，而无需使用:empty

来执行此操作。

<!-- must no content: https://css-tricks.com/almanac/selectors/e/empty/ -->
<!--@formatter:off-->
<div class="title"><ng-content select=".nav-title"></ng-content></div>
<!--@formatter:on-->
.title:empty {
  display: none;
}

适用于任何HTML CSS。

Answer 2

template: `This is <span #wrapper>
  <ng-content select=".content"></ng-content>
  </span>`

@ViewChild('wrapper') wrapper:ElementRef;
ngAfterContentInit() {
    console.log(this.wrapper.innerHTML); // or `wrapper.text`
}

另请参见

• 将零件儿童作为字符串
• 访问transcluded内容

Answer 3

如果要使用 *ngIf和 else使用条件语句，则可能是可能的

@Component({
  selector: 'my-demo',
  template: `<div *ngIf='content; else noContent'>
This is <ng-content select=".content"></ng-content>
</div>
<ng-template #noContent>No content</ng-template>`
})
export class DemoComponent { name = 'Angular'; content = true}

demo