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-outlet元素本身就是一个视图容器：

    @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);
      }

使用ViewContainerRef是DOM should be manipulated in Angular的方式。 ViewContainerRef更像是一个占位符，用于将组件注入DOM /呈现的位置，而不是组件的容器。因此，在视图容器的帮助下插入的任何元素都将插入到视图容器元素旁边，而不是在中。

Here is the one启用@yurzui提到的此行为的可能原因。

为什么Angular4路由器在<router-outlet>之外渲染元素

1 个答案: