在 Angular 2 中，<ng-content> 元素用于将父组件的内容投影到子组件中。在某些情况下，您可能需要检查这个投影内容是否为空。本文将讨论如何在 Angular 2 中实现。
检查 <ng-content> 的长度
要确定 <ng-content> 是否为空，可以使用以下方法：
-- -------------------- ---- -------
------ - ---------- ---------------- --------- - ---- ----------------
------------
--------- ---------------
--------- -
-----
-------------------------
------
-
--
------ ----- ----------- -
----------------------------- ---------- ---------------
-------------------- -
-- ---------------------- --- -- -
------------------------- -- --------
-
-
-在上面的代码中，我们使用 ContentChildren 将 <ng-content> 内容注入到 myContent 变量中。然后我们在 ngAfterContentInit() 生命周期钩子中检查 myContent 数组的长度是否为零。如果是，就意味着 <ng-content> 是空的。
使用 ng-template
除了使用 ContentChildren，还可以使用 ng-template 来检查 <ng-content> 是否为空。以下是一个示例：
<my-component>
<ng-template #myContent>
This is some content.
</ng-template>
</my-component>-- -------------------- ---- -------
------ - ---------- ----------------- ---------- ----------- - ---- ----------------
------------
--------- ---------------
--------- -
-----
-------------------------
------
-
--
------ ----- ----------- ---------- ---------------- -
----------------------- ---------- -----------------
-------------------- -
-- ----------------- -
------------------------- -- --------
-
-
-在这个例子中，我们使用 ng-template 定义了投影内容。然后我们使用 ViewChild 注入这个模板到 myContent 变量中。最后，我们在 ngAfterContentInit() 钩子中检查 myContent 是否为空。
结论
在 Angular 2 中，检查 <ng-content> 是否为空是一项非常简单的任务。您可以使用 ContentChildren 或 ng-template 来访问投影内容，并检查其长度或是否存在。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27445