Angular新手求助：<app-products-list/>组件无法在浏览器中渲染

你的问题核心在于AppComponent模板的标签嵌套错误：

在app.component.ts的模板里，你把<app-products-list/>写在了未闭合的<app-header>标签内部：

<app-header>

<app-products-list/>

这相当于将ProductsListComponent作为内容投影到了HeaderComponent中，但如果HeaderComponent的模板里没有<ng-content></ng-content>来接收投影内容，Angular虽然会实例化ProductsListComponent（所以构造函数的日志能正常输出），但不会把它的DOM节点渲染到页面上，自然在浏览器元素面板里看不到。

修复步骤 #

修改app.component.ts的模板，正确闭合<app-header>标签，让两个组件成为同级元素：

@Component({
  selector: 'app-root',
  imports: [HeaderComponent, ProductsListComponent],
  template: `
   <app-header></app-header>

   <app-products-list/>
  `,
  styles: [],
})

或者使用自闭合的<app-header/>写法：

<app-header/>
<app-products-list/>

修改完成后，ProductsListComponent会作为独立的DOM节点渲染，你就能在浏览器元素面板中看到它，同时组件内的产品列表内容也会正常显示。

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