问题如果ng-content有内容或空Angular2

我试图了解如何创建一个if何时显示 ng-content 是空的。

<div #contentWrapper [hidden]="isOpen">
    <ng-content ></ng-content>
</div>

<span *ngIf="contentWrapper.childNodes.length == 0">
    <p>Display this if ng-content is empty!</p>
</span>

当内容为空时，我尝试使用那个显示数据，但即使信息为空也没有显示 <span> 标签

谢谢，永远感谢你的帮助。

5112

2018-06-17 06:17

起源

看看我的解决方案： stackoverflow.com/a/49563380/1296298 - Lerner

答案:

使用 children 代替 childNodes。 Angular为其创建注释节点 *ngIf* which are counted bychildNodes`

<div #contentWrapper [hidden]="isOpen">
    <ng-content ></ng-content>
</div>

<span *ngIf="contentWrapper.children.length == 0">
    <p>Display this if ng-content is empty!</p>
</span>

Plunker的例子

2018-06-17 06:25

谢谢Mate，你的答案会更好 - rodboc

我认为如果ngIf在包装器本身上，那将无效 - Ced

@Ced不，在这种情况下你必须使用类似的东西 @ViewChild('contentWrapper') wrapper:ElementRef; 和 *ngIf="wrapper?.nativeElement?.children?.length" - Günter Zöchbauer

@GünterZöchbauer似乎不起作用。我现在正在努力解决同样的问题：嵌入时从DOM中删除一个元素 <ng-content> 是空的。猜猜只能通过模板投影来解决，但是如何？尚未找到配方。 - willydee

对不起，不知道是什么问题。我建议您使用代码创建一个新问题，该代码显示如何重现以及您尝试完成的任务。 - Günter Zöchbauer

热门问题

不使用eval / new函数的JavaScript模板库当涉及内部类时，Java继承如何工作 .NET Windows服务的奇怪问题在.ipa或.app下查找App ID 快速入门XSLT参考[关闭] 如何找出Android应用程序中未使用的资源 Ruby中并发的同步方法[重复] 将std :: chrono :: system_clock :: time_point转换为struct timeval并返回 Google Drive API V3（javascript）更新文件内容 Bootstrap 3.0 - 将元素推到底部受密码保护的.NET ClickOnce部署？如何用postgresql安装wordpress coq Set或Type如何成为命题硒滚动元素进入（中心）视图在Spring Transaction JUnit测试中自动装配Hibernate会话的正确方法 Git的Dockerfile策略如何在FOS_PICKFOLDER中使用IFileDialog，同时仍在对话框中显示文件名在Firefox扩展中复制Google Chrome浏览器操作弹出效果 CakePHP找到MAX 芹菜 - 完成任务的召唤功能从使用fmemopen创建的流中读取宽字符 .NET是否为每个程序集创建一个字符串实习池？ DefaultModelBinder不绑定嵌套模型 Navigator.MediaDevices.getUserMedia（）使用了哪些相机通信标准？选择命名空间名称时应该知道什么？ cout Swagger Codegen CLI Java客户端 - 如何正确使用它一个很好的哈希函数用于采访整数，字符串？ Maven 3 ciManagement配置的目的是什么？如何通过语言文化获取代码页？

问题 如果ng-content有内容或空Angular2

答案:

热门问题

问题如果ng-content有内容或空Angular2