angular - *ngIf 是否可以从外部获取任何内容？

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)。