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

Posted 2023-03-13

【中文标题】*ngIf <ng-content> 嵌入从外部获取任何可能的内容？

【英文标题】：*ngIf <ng-content> Transclusion gets from outside any content possible?

【发布时间】：2018-01-11 02:20:45

【问题描述】：

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

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

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

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

【参考方案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）。

【讨论】：

你忘记了console.log(this.wrapper.nativeElement.innerHTML)中的.nativeElement

@n00dl3 你是对的。非常感谢您的提示 - 已修复。

你错过了一个 ;)

@n00dl3 周末时间 ;-) 再次感谢！

@Budi 有一个您可能会感兴趣的未解决问题：github.com/angular/angular/issues/8563 因为这个问题已由 Miško Hevery 提出，我想它总有一天会实现...