Question

早上好，我有一个问题，已经持续了几个小时，我无法解决。我有一个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中定义了辅助路由，它们根本就无法识别，我已经工作了几个小时，我不知道我错了什么。

Answer 1

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

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

角度辅助插座路由器不起作用

1 个答案: