Angular如何实现全站共用导航栏并解决子组件样式继承问题

你的实现思路本身是对的，app.component.html 里的三个节点本来应该渲染为同级节点，出现路由组件被包裹在 app-navbar 内部的问题，100%是 NavbarComponent 自身的模板存在语法错误。
最常见的原因是 NavbarComponent 的模板文件（通常为 navbar.component.html）存在未闭合的HTML标签，浏览器在解析DOM的时候会自动补全缺失的闭合标签，导致后续的 <router-outlet>、<app-footer> 都被识别成 app-navbar 的内部子节点。

排查步骤 #

• 打开 navbar.component.html，逐行检查所有开标签（比如 <nav>、<div>、<ul>、<li> 等）是否都有对应的闭合标签，没有遗漏或者拼写错误。
• 临时修改 app.component.html，把 <app-navbar></app-navbar> 替换为 <div>测试导航栏</div>，再查看DOM结构：如果此时测试div、路由渲染内容、页脚是同级节点，就可以完全确定是Navbar组件内部模板的问题。
• 如果确认标签都已闭合，可以把Navbar模板的内容简化到只剩一行纯文本测试，确认层级正常后再逐步恢复原有代码，定位出具体是哪部分标签导致的问题。

另外你提到的样式继承问题，在修复DOM层级后会自然消失：如果组件是同级关系，Navbar的CSS属性不会默认继承给其他同级组件，除非你写了全局样式。

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