如何通过Angular的ng-content实现内容投影的简要探讨？

本文共计1833个文字，预计阅读时间需要8分钟。

在本文中，我们将探讨如何利用ng-content进行内容投影，创建灵活的可复用组件。ng-content是一个用于插入外部或动态内容的占位符。父组件会将外部内容或动态内容传递给ng-content。

在这篇文章中，我们将会探索如何使用 ng-content 进行内容投影，来创建灵活的可复用组件。

ng-content

ng-content 元素是一个用来插入外部或者动态内容的占位符。父组件将外部内容传递给子组件，当 Angular 解析模板时，就会在子组件模板中 ng-content 出现的地方插入外部内容。

我们可以使用内容投影来创建可重用的组件。这些组件有相似的逻辑和布局，并且可以在许多地方使用。一般我们在封装一些公共组件的时候经常会用到。

不使用内容投影

为了理解为什么要使用 ng-content 进行内容投影，首先让我们来创建一个很常见的 button 组件。