前言

在使用结构型指令前，我们先了解几个 Angular 的高级功能，我们需要用到以下 api 去构建我们的按钮组件

• 内容投影（ng-content）
• 动态模板（ng-template、ngTemplateOutlet）
• 查询内容（@ContentChild）
• 结构型指令

最终实现效果，具有主题样式，大小尺寸的按钮组

内容投影

内容投影可以让我们在父组件中插入或投影另一个组件的内容，使组件的设计更为灵活，详细用法可以参考官方文档描述 在设计中我们让按钮组app-button-group、app-button接收用户的投影

动态模板

动态模板使用 ng-template、ngTemplateOutlet 来接收我们的组件蓝图，让动态数据渲染到 app-button-group，详细用法可以可以参考这篇文章

内容查询

ng-content 可以访问组件内容但不提供模板引用。我们可以使用 ContentChild 装饰器查询组件投影内容

结构指令

你一定使用过 NgIf、NgFor、NgSwitch 指令，这些指令都是 Angular 内置的结构型指令，详细用法可以参考官方文档 在设计中我们定义结构型指令来查询组件投影内容

最后

查看此 Stackblitz 以获取完整代码和演示