在Angular中，内容投影用于在组件中投影内容。让我们仔细看看它是如何工作的:
内容投影允许您在组件中插入阴影DOM。简单地说，如果你想在组件中插入HTML元素或其他组件，那么你可以使用内容投影的概念。在Angular中，您可以使用实现内容投影<ng-内容>< /ng-内容>。您可以通过正确使用内容投影来制作可重用的组件和可扩展的应用程序。
为了理解内容投影，让我们考虑如下面的代码清单所示的GreetComponent:
从 “@ angular/core” 导入 { Component}； @ Component({选择器: 'greet'“{{message}}” 模板:})导出GreetComponent类 { 消息: string = “ 你好!” }
现在，如果您在另一个组件中使用GreetComponent，并且想要从父组件传递问候消息，那么您应该使用 @ Input() 装饰器。这样，修改后的GreetComponnet将如下所示:
从 “@ angular/core” 导入 { Component，Input}； @ Component({选择器: 'greet'模板 “{{message}}”})导出GreetComponent类 { @ Input() message: string; }
使用 @ Input() 装饰器，您可以将一个简单的字符串传递给GreetComponnet，但是如果您需要将不同类型的数据传递给GreetComponent，例如:
- 内部HTML
- HTML元素
- 样式HTML
- 其他组件等。
要传递或投影样式的HTML或其他组件，请使用内容投影。让我们修改GreetComponent以在此代码中使用内容投影:
我们使用在GreetComponent中投影内容。当您使用GreetComponent时，您将传递如下所示的内容:
在上面的清单中，您将样式化的HTML投影到GreetComponent，您将得到以下输出:
这是单槽内容投影的示例。无论你传递给GreetComponent将被投影。因此，让我们将多个HTML元素传递给GreetComponent，如下面的清单所示:
在这里，我们将三个HTML元素传递给GreetComponent，所有这些元素都将被投影。您将获得如下图所示的输出:
在DOM中，您可以看到在GreetComponent中，所有HTML元素都被投影。
多槽投影
您可能需要在组件的多个插槽中投影元素。在下一个示例中，假设您要创建这样的贺卡:
这可以使用组件创建，如下所示:
假设我们需要传递header元素和btn元素，以便名称和按钮可以动态传递给GreetComponent。这次，我们需要两个插槽:
- 一个槽头元素
- 一个插槽的btn元素
让我们修改GreetComponent以满足上述要求，如下图所示:
在这里，我们使用ng内容两次。现在，问题是我们是否选择一个特定的ng内容来投影h1元素和另一个ng内容来投影btn元素？
您可以使用 “ ng-content ”> “selector” 选择特定的插槽进行投影。有四种类型的选择器:
- 项目使用标签选择器
- 项目使用类选择器
- 项目使用id选择器
- 项目使用属性选择器
您可以使用标签选择器进行多插槽投影，如下面的清单所示:
接下来，您可以将内容投影到GreetComponent，如下面的清单所示:
正如您所看到的，我们使用了两次GreetComponent，并投影了不同的h1和button元素。您将获得如下图所示的输出:
使用标签选择器的问题是所有的h1元素将被投影到GreetComponent。在许多情况下，您可能不希望这样做，可以使用其他选择器，如类选择器或属性选择器，如下所示:
接下来，您可以将内容投影到GreetComponent，如下面的清单所示:
您将获得与上述相同的输出，但是这次您使用类名和属性来投影内容。当您检查DOM上的元素时，您会发现投影元素的属性名称和类名称，如下图所示:
内容投影对于在组件中插入阴影DOM非常有用。要在组件中插入HTML元素或其他组件，您需要使用内容投影。在AngularJS 1.x中，内容投影是使用转出,但是在Angular中，它是使用 <ng-内容>
在下一篇文章中，您将了解Angular中更重要的概念，敬请关注。另外，不要忘记查看Ignite UI for JavaScript/HTML5和ASP.NET MVC ，您可以将其与HTML5，Angular，React和ASP.NET MVC一起使用来创建富Internet应用程序。您可以免费下载试用版我们所有的JavaScript控件!
</p