Angular中如何识别父子组件？是否存在多个父组件？

一、如何识别组件的父子关系 #

• 模板直接引用判定：如果组件A的HTML模板中，直接使用了组件B的选择器（比如 <app-b></app-b>），那么A就是B的直接父组件，B是A的直接子组件。
• 路由嵌套判定：在路由配置里，若组件B被定义为组件A的子路由（配置在children数组中），当路由匹配时B会渲染在A的<router-outlet>中，此时A是B的父组件。
• 组件树视图判定：借助Angular DevTools的组件树面板，层级上处于上方的组件就是下方组件的父组件，直接相邻的是直接父子关系，隔层则为间接父子关系。

二、Angular应用中的父组件数量 #

Angular应用有且仅有一个根组件（默认是AppComponent），它是整个组件树的最顶层节点。但除此之外，应用中会存在大量的父组件：

• 任何组件只要在自己的模板中引用了其他组件，或者作为路由父节点包含子路由组件，它就可以成为父组件。比如DashboardComponent里引用了UserCardComponent和ChartComponent，那DashboardComponent就是这两个组件的父组件，同时它自身又是AppComponent的子组件。
• 简言之：根组件是唯一的顶级父组件，但组件树的各个层级都可以存在父组件，并非只有根组件能作为父组件。

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