辅助路由模式附加到主要组件

Question

大家好我想尝试在角度路由正常工作时使用辅助路由显示模态对话框但是模态没有打开而是模板附加在主路由器的末尾。

这是我的代码

模态-component.html

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="closeModal()">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

<div class="modal-body">
    <ng-content select="modal-content"></ng-content>
</div>




// actual popup comonent
<app-modal-window>
// some content
</app-modal-window>


// routing configaration
    {
    path: 'product-details/:prodictId',
    component: ProductDetailsComponent,
    outlet: 'modal'
  }