*ngIf <ng-content> 嵌入从外部获取任何可能的内容？

Question

我在我的 Angular4 项目中得到了这个小代码：

<div class="divider"></div>

<ng-content select=".nav-toggle"></ng-content>

现在我想让分隔符只可见，如果有任何内容来自 ng-content 标记的外部。这可能吗？我绝对找不到任何有关此的信息。

Answer 1

没有查询任意投影内容的好方法

@Component({
    selector: 'item',
    template: `
<div *ngIf="divider" class="divider"></div>
<div #wrapper><ng-content select=".nav-toggle"></ng-content></div>'})
class Item implements AfterContentInit {

    @ViewChild('wrapper') wrapper:ElementRef;

    divider:boolean = false;

    ngAfterContentInit() {
      console.log(this.wrapper.nativeElement.innerHTML); // or `wrapper.text`
      this.divider = !!this.wrapper.nativeElement.children;
    }
}

另见Access transcluded content

如果您知道投影内容是特定的 Angular 组件或元素应用了特定的模板变量，则可以使用@ContentChildren()（另请参阅angular 2 / typescript : get hold of an element in the template）。