Angular中如何渲染ContentChildren中的<app-icon-box>组件？

嘿，我来帮你搞定这个组件渲染的问题！你遇到的{{ box }}只显示[object Object]是完全正常的——因为Vue的插值表达式{{ }}是用来渲染纯文本内容的，当你传入一个组件对象时，它只会把对象转换成默认的字符串形式，也就是你看到的[object Object]，根本不会把它当成组件来处理。

下面给你两种正确的渲染方式：

1. 用<component>动态组件渲染（推荐） #

这是Vue官方提供的动态渲染组件的标准方式，不管你用的是Vue 2还是Vue 3都适用。如果你的box变量是组件对象（比如导入的组件实例），直接在模板里这么写：

<component :is="box"></component>

这里的:is是Vue的特殊绑定属性，它会告诉Vue：“把这个变量对应的组件渲染出来”，而不是当成文本处理。

举个完整的Vue 3单文件组件例子：

<template>
  <!-- 正确渲染组件 -->
  <component :is="iconBox"></component>
</template>

<script setup>
// 导入你的组件
import AppIconBox from './AppIconBox.vue'

// 把组件赋值给变量iconBox
const iconBox = AppIconBox
</script>

2. 直接使用组件标签（适用于已注册的组件） #

如果你已经在当前组件的components选项里（Vue 2）或者通过import自动注册（Vue 3 <script setup>）了<app-icon-box>，那你可以直接在模板里写组件标签，根本不需要变量：

<app-icon-box></app-icon-box>

这种方式更直接，适合不需要动态切换组件的场景。

关键总结 #

• 绝对不要用插值表达式{{ }}渲染组件——它只处理文本！
• 动态渲染组件用<component :is="组件对象/组件名称">
• 静态渲染直接写组件标签即可

内容的提问来源于stack exchange，提问作者user1807782