Angular中能否以自定义标签形式向组件传入子内容？

当然可以实现你想要的写法，这其实是Angular的ng-content支持CSS元素选择器的常规用法，具体操作如下：

1. 修改app-comp组件的模板 #

把ng-content的select属性改成直接匹配自定义标签名：

<div class="test">
  <ng-content select="content1"></ng-content>
  <ng-content select="content2"></ng-content>
</div>

这里的select="content1"会直接匹配<content1>标签，而不是带content1属性的元素。

2. 在component2中直接使用自定义标签 #

现在你可以按照预期的简洁方式使用app-comp了，注意要把自定义标签放在app-comp组件内部，这样ng-content才能正确捕获内容：

<app-comp>
  <content1>Test</content1>
  <!-- 可选：添加content2内容 -->
  <content2>更多测试内容</content2>
</app-comp>

补充说明 #

你之前使用的<div content1>是对应ng-content的属性选择器（即select="[content1]"），而改成自定义标签后，本质是切换成了元素选择器，这完全符合Angularng-content的设计规则——它支持所有标准CSS选择器语法。

另外建议：自定义标签尽量避免和原生HTML元素重名（比如不要用<header>、<nav>这类），如果团队有规范，也可以给标签加统一前缀（比如<app-content1>），避免潜在的命名冲突。

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