* ng如果<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;
    }
}

另请参阅访问已包含的内容

如果您知道投影的内容是特定的Angular组件或元素应用了特定的模板变量，则可以使用@ContentChildren()（另请参见angular 2 / typescript：在模板中保留元素）。