Angular2 ng-content 指令组件中嵌入内容

Angular2中的ng-content指令：如何巧妙地在组件中嵌入内容

在Angular框架中，ng-content指令是一种强大的工具，它允许开发者在组件中嵌入模板代码，从而使得组件更加可复用和定制。对于想要深入了解这一特性的开发者来说，将会为你揭示其背后的奥秘。

想象一下这样的场景：你正在设计一个通用的页面header组件，其导航菜单的样式已经预设好，你只需要在header标签内添加菜单内容即可。这时，ng-content标签就能派上用场。它能够将父组件模板中包含的内容添加到指定的位置。ng-content的select属性支持CSS选择器，如"id",".class","[name=value]"等，这使得你可以灵活地选择需要嵌入的内容。

让我们来看一下header组件的模板是如何使用ng-content的：

```html

{{title}}

Checkbox

```

在上述模板中，ng-content标签用来嵌入父组件中标记为menu的内容。这些内容会出现在ng-content标签的位置。

那么，如何在父组件中使用这个header组件并嵌入内容呢？下面是一个示例：

```html

```