* 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）。