子组件显示在另一个子组件下

问：

子 #1 组件： 选择器： 'app-home'

子 #2 组件： 选择器： 'app-plans'

子 #1 html：

    <p>child 1 here</p>

子 #2 HTML：

    <p>Child 2 here</p>

app.component.html：

<app-home></app-home>

app-routing.module.ts：

    const routes: Routes = [
    {path: 'plans', component: PlansComponent},
    {home: 'home', component: HomeComponent} 
    ]

在浏览器 localhost：4200/plans 中显示： 孩子 1 在这里 孩子 2 在这里

如果我将app.component.html更改为：

    <router-outlet></router-outlet>

localhost：4200/plans 显示： 孩子 2 在这里

在app.component.html中使用“app-home”选择器有什么问题？为什么它在 localhost：4200/plans 中显示“child 1 here”？（我只期待“孩子 2 在这里”。

显示了我预期的结果，但我不明白为什么没有像我预期的那样工作。