角，二级出口路由器不工作答案

【问题标题】：Angular ,secondary outlet router does not work角，二级出口路由器不工作
【发布时间】：2018-05-23 11:14:31
【问题描述】：

早上好，我有一个问题已经持续了几个小时，但我无法解决。我有一个 Container 组件，在里面我有应该打开辅助路由的按钮集装箱路线如下

/path1/path2/:token1/token2

    app.path.component.html
          <!-- + code !-->

          <a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>

          <a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>


        <router-outlet
        name="popup"
        (activate)='onActivate($event)'
        (deactivate)='onDeactivate($event)'></router-outlet>
        <router-outlet name="popupx"></router-outlet>

需要注意的是，要访问path1/*，你必须登录，为此使用AuthGuard

app.routing.module.ts

      {
        path: 'compose',
        component: ComposeMessageComponent,
        outlet: 'popup'
      },
      {
        path: 'compose2',
        component: TrabajandoComponent,
        outlet: 'popupx'
      },

  {
    path: '',canActivate:[AuthGuard],loadChildren:'./home/home.module#HomeModule'
  },

  {
    path: 'auth',
    loadChildren:'./authentication/authentication.module#AuthenticationModule'
  },
  {
    path:'admin',
    canDeactivate:[AuthGuard],
    loadChildren:'./administration/administration.module#AdministrationModule'
  },
  {
    path:'',
    redirectTo:'/auth',
    pathMatch:"full"
  },
  { path: '**', component: PageNotFoundComponent }

执行应用程序时，我单击其中一个插座，但未显示这些插座

到path1/path2/:token1/:token2的组件路径是；

AppComponent
  <router-outlet name="primary"></router-outlet>
   <app-home>
      <app-header></app-header>
      <app-container>
         .......
          <router-outlet></router-outler>   :token1/:token2
           <app-path>
          <!-- + code !-->

          <a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>

          <a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>


        <router-outlet
        name="popup"
        (activate)='onActivate($event)'
        (deactivate)='onDeactivate($event)'></router-outlet>
        <router-outlet name="popupx"></router-outlet>    
          </app-path>
         .......
          ......
      </app-container>
      <app-footer><app-footer>

    </app-home>

<!-- end APPcomponent -->

就像这样不起作用，但是如果我在 HomeComponent 中打了二级路由，它们可以工作，但是它们超出了框架

  AppComponent
  <router-outlet name="primary"></router-outlet>

   <app-home>
      <app-header></app-header>
      <app-container>
         .......
          <router-outlet></router-outler>   :token1/:token2
           <app-path>
          <!-- + code !-->

          <a [routerLink]="['/',{ outlets: { popup: ['compose'] } }]">Compose</a>

          <a [routerLink]="['/',{ outlets: { popupx: ['compose2'] } }]">Compose2</a>

          </app-path>
         .......
          ......
      </app-container>
      <app-footer><app-footer>

    </app-home>
      <!-- This works -->
        <router-outlet             
        name="popup"
        (activate)='onActivate($event)'
        (deactivate)='onDeactivate($event)'></router-outlet>
        <router-outlet name="popupx"></router-outlet>  

<!-- end APPcomponent -->

如果我在 HomeModule 中定义辅助路由，它们根本无法识别，我已经为此工作了好几个小时，但我不知道我错在哪里。

【问题讨论】：

标签： angular-routing angular5 angular-router

【解决方案1】：

尝试添加模块路径来代替空白，例如

  {
    path: 'home',canActivate:[AuthGuard],loadChildren:'./home/home.module#HomeModule'
  },

【讨论】：