在 Angular 17 独立组件（standalone）模式下，将自定义组件（如 ）直接置于 内会导致 HTML 表格结构非法（如 会插入非 td/th 元素），从而破坏表格渲染；正确解法是改用类选择器（.app-product）使组件逻辑复用而不污染 DOM 层级。
在 angular 17 独立组件（standalone）模式下，将自定义组件（如 `` 内会导致 html 表格结构非法（如 `
Angular 的模板编译机制要求 <table> 的子元素必须严格符合 HTML 规范：<code><thead> 和 <code><tbody> 下只能包含 <code><tr>，而 <code><tr> 内部只能包含 <code><th> 或 <code><td>。当你在 <code><tr> 中嵌套一个独立组件 <code><app-product></app-product> 时，即使该组件模板只输出 <td>，Angular 默认仍会将其包裹在一个宿主元素（即 <code><app-product></app-product> 标签）中——这导致 DOM 结构变为：
<tr><app-product><!-- ❌ 非法：tr 的直接子节点不能是自定义元素 --><td>...</td>
<td>...</td>
<td>...</td>
</app-product></tr>
浏览器会自动“修复”该错误（例如将 <app-product></app-product> 移出 <tr>），最终导致表格错乱、样式失效，甚至 SSR 时按钮事件丢失（因服务端渲染无法执行客户端绑定的 <code>(click)）。
✅ 根本解决方案：使用类选择器（Class Selector）替代元素选择器
通过将 ProductComponent 的 selector 改为 .app-product，Angular 将不再创建 <app-product></app-product> 宿主标签，而是将组件逻辑挂载到带有 class="app-product" 的现有元素上——完美保持 <tr> → <code><td> 的纯净结构。<p><strong>修改步骤如下：</strong></p>
<ol>
<li>
<p><strong>更新 <code>product.component.ts 的选择器：
@Component({
selector: '.app-product', // ✅ 改为类选择器
standalone: true,
templateUrl: './product.component.html',
styleUrl: './product.component.css'
})
export class ProductComponent {
@Input() product!: Product;
@Output() addToCartEvent = new EventEmitter<product>();
addToCart() {
this.addToCartEvent.emit(this.product);
}
}</product>
调整 确保 ⚠️ 重要注意事项： app.component.html：移除 <app-product></app-product> 标签，直接在 <tr> 上添加 <code>class 和输入/输出绑定：<h2>Products</h2>
Name
Price
Action
[product]="product"
(addToCartEvent)="addToCart($event)">
product.component.html 仅包含单元格内容（无额外 wrapper）：<!-- product.component.html -->
<td>{{ product.name }}</td>
<td>{{ product.price }}$</td>
<td><button>Add To Cart</button></td>
tr 是合法容器），Angular 不会创建新元素，因此不会破坏表格结构； <tr> 及其子 <code><td>，客户端再激活事件绑定，避免按钮不可点击； <li>若需复用 <code>ProductComponent 到非表格场景（如卡片列表），建议保留双模式支持：可通过 @Host() 或条件模板实现，但本例中专注表格最佳实践； <tr> 直接子节点为 <code><td>，而非自定义标签。<p>通过这一改造，你既保留了组件化设计（职责分离、可测试、易维护），又完全遵循 HTML 表格规范，实现清晰、健壮、SSR 友好的产品列表渲染。</p>
</td>
