Angular中Navbar组件重复显示问题咨询

先看你提供的代码和效果截图：

AppComponent代码截图 #

Navbar重复显示效果截图 #

下面是几个直接的排查方向：

• 检查app.component.html模板，确认是否不小心写了两次<app-navbar>标签，有时候编辑或复制代码时容易出现这种疏忽。
• 查看Navbar组件的模板（比如navbar.component.html），是否在内部又使用了<app-navbar>标签，这种递归引用会导致组件重复渲染。
• 检查路由配置（app-routing.module.ts），确认是否存在把AppComponent作为子路由组件的情况，或者路由出口<router-outlet>加载的组件中也包含了Navbar。
• 检查AppComponent的逻辑代码，有没有通过动态组件加载的方式重复添加了Navbar实例。
• 确认是否在模块（如AppModule）中没有重复声明Navbar组件——不过这种情况通常会直接触发编译错误，可以先排除。

按上面的顺序逐一排查，大概率能找到问题所在。

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