javascript - 为什么Angular4路由器在外面渲染元素

Question

我在我的应用程序中使用了 Angular4 路由器。我计划使用<router-outlet>容器渲染子组件。但我观察到的是子组件呈现在<router-outlet>.

预期的：

<router-outlet>
   <child-component/>
</router-outlet>

实际的：

<router-outlet></router-outlet>
<child-component/>

Angular 决定像这样进行这项工作的任何可能原因？使用的路由器配置与https://angular.io/tutorial/toh-pt5
中给出的完全相同

Answer 1

在底层router-outlet使用ViewContainerRef来操作 DOM。本质上router-outletelement 本身就是一个视图容器：

    @Directive({selector: 'router-outlet', exportAs: 'outlet'})
    export class RouterOutlet implements OnDestroy, OnInit {
      constructor(..., private location: ViewContainerRef, ...

      attach(ref: ComponentRef<any>, activatedRoute: ActivatedRoute) {
        ...
        this.location.insert(ref.hostView);
      }

Using是在 Angular 中操作ViewContainerRefDOM 的方式。这更像是一个占位符，用于将组件注入到 DOM 中/渲染的位置，而不是组件的容器。因此，在视图容器的帮助下插入的任何元素都插入到视图容器元素旁边，而不是 inside。ViewContainerRef

这是@yurzui 提到的启用此行为的一个可能原因。