Angular 路由器插座工作不正确

加载路由器正在路由器出口外部渲染的组件 app.component.ts

@Component({
    selector  : "body",
    template  : `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/auth/login", name: "Auth", component: AuthComponent},
    {path: "/...", name: "Default", component: DefaultComponent}
])
export class AppComponent {
    constructor(private _router: Router) {
    }
}

@Component({
    template  : `
    <header-view></header-view>
    <router-outlet></router-outlet>
`,
    directives: [HeaderComponent, ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/", name: "LevelsList", component: LevelListComponent, useAsDefault: true}
])
export class DefaultComponent {
    constructor(private _router: Router) {}
}

@组件({
选择器：“主体”，
模板：``，
指令：[路由器指令]
})
@线路图([
{路径：“/auth/login”，名称：“auth”，组件：AuthComponent}，
{路径：“/…”，名称：“默认”，组件：DefaultComponent}
])
导出类AppComponent{
构造函数（专用路由器：路由器）{
}
}

default.component.ts

@Component({
    selector  : "body",
    template  : `<router-outlet></router-outlet>`,
    directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/auth/login", name: "Auth", component: AuthComponent},
    {path: "/...", name: "Default", component: DefaultComponent}
])
export class AppComponent {
    constructor(private _router: Router) {
    }
}

@Component({
    template  : `
    <header-view></header-view>
    <router-outlet></router-outlet>
`,
    directives: [HeaderComponent, ROUTER_DIRECTIVES]
})
@RouteConfig([
    {path: "/", name: "LevelsList", component: LevelListComponent, useAsDefault: true}
])
export class DefaultComponent {
    constructor(private _router: Router) {}
}

@组件({
模板：`
`,
指令：[主机组件，路由器指令]
})
@线路图([
{路径：“/”，名称：“LevelsList”，组件：LevelListComponent，useAsDefault:true}
])
导出类DefaultComponent{
构造函数（专用_路由器：路由器）{}
}

控制台没有错误。在检查一个元素时，我看到路由器出口是空的，组件在它之后渲染

---

这是设计的。有一个相关的未决问题，但我没有得到这样的印象：这是一个被考虑更改的东西。

那么为什么我有一个未定义的元素？好吧，这是当您的组件没有

选择器时：“xxx”

工作正常。感谢在结束标记下面呈现的子路由内容让我抓狂，因为除了这里，似乎没有任何地方记录或讨论它。谢谢你的提问，谢谢你@Gunter的回答。这个问题仍然很难在谷歌搜索结果中找到。我们如何提高能见度？