Angular 19多内容投影遇NG8001：是否需自定义card-title组件？

核心结论 #

是的，当你用<card-title>这类自定义元素名作为ng-content的选择器时，必须先定义对应的Angular组件或指令，否则Angular模板编译器会将其识别为未知元素，抛出NG8001错误。

原因解析 #

Angular对模板中的元素有严格校验规则：

• 只有原生HTML元素（如<div>、<p>）、已在模块中声明的组件/指令，或者通过CUSTOM_ELEMENTS_SCHEMA配置允许的自定义元素，才能在模板中正常使用。
• 官方文档中的<card-title>示例，默认假设你已经创建了名为card-title的组件/指令，但文档未明确说明这一步前置操作，导致直接使用时出现报错。

而用属性选择器（如[card-title]）的方式不会报错，是因为你只是给原生<div>添加了一个自定义属性，Angular不会把带自定义属性的原生元素判定为未知元素，因此无需额外定义组件/指令。

两种解决方式 #

方式一：自定义card-title组件/指令 #

如果你想坚持用元素选择器的方式，可以创建一个极简的容器组件：

// card-title.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'card-title',
  template: '<ng-content></ng-content>' // 仅作为内容容器，无需额外逻辑
})
export class CardTitleComponent {}

然后在你的模块中声明该组件：

// your-module.ts
import { NgModule } from '@angular/core';
import { CardTitleComponent } from './card-title.component';
import { CustomCardComponent } from './custom-card.component';

@NgModule({
  declarations: [CustomCardComponent, CardTitleComponent],
  exports: [CustomCardComponent, CardTitleComponent]
})
export class YourModule {}

完成后就能正常使用<card-title>进行内容投影。

方式二：继续使用属性选择器 #

这是更轻量化的方案，无需额外创建组件，直接沿用你已验证可行的写法：
组件模板：

<div class="card-shadow">
  <ng-content select="[card-title]"></ng-content>
  <div class="card-divider"></div>
  <ng-content select="[card-body]"></ng-content>
</div>

使用组件：

<custom-card>
  <div card-title>Hello</div>
  <div card-body>Welcome to the example</div>
</custom-card>

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