在模态或新页面中打开延迟加载的路由器链接

Question

我有一个app.routing.ts文件，如下所示

    import { ModuleWithProviders, NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { AppComponent } from './app.component';
    import { SalesComponent } from './advisory/sales.component';

    const appRoutes: Routes = [
        {
            path:'admin',loadChildren:'./auth/admin/admin.module#AdminModule'
        },
        {
            path: '',
            redirectTo: '/main',
            pathMatch: 'full'
        },
        {
            path: 'main', component: SalesComponent,
            data: { apptitle: 'main', subtitle: 'main' }
        },

    ];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes, 
        { useHash: true },
        )],
    exports: [RouterModule]
})

export class AppRoutingModule { }

App.component.html

<router-outlet name="app-popup"></router-outlet>

功能模块admin.module.ts文件如下

 import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { AdminComponent } from './admin.component';
    import { RouterModule } from '@angular/router';

    @NgModule({
      imports: [
    CommonModule,
    RouterModule.forChild([{
         path:'index',
        component: AdminComponent,
        outlet: 'app-popup',
    }
    ]),

    declarations: [AdminComponent]
    })

    export class AdminModule { }

Admin.component.html

<span class="title">Login</span>

<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
          <div class="loginmodal-container">
              <h1>Login to Your Account</h1><br>
            <form>
              <input type="text" name="user" placeholder="Username">
              <input type="password" name="pass" placeholder="Password">
              <input type="submit" name="login" class="login loginmodal-submit" value="Login">
            </form>

            <div class="login-help">
              <a href="#">Register</a> - <a href="#">Forgot Password</a>
            </div>
          </div>
      </div>
    </div>

我有一个xyz组件，我试图在按下按钮的模型对话框中启动AdminComponent

<button [routerLink]="[ '', { outlets: { 'app-popup': ['index'] } }] "  data-toggle="modal" data-target="#login-modal" ></button>

单击按钮时，它会在页面底部显示“登录”标题，但登录模式对话框无法打开。这对我来说都是新的。有关如何在模态页面和新页面中打开这个延迟加载的路由器链接的任何提示将非常感激。