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

Posted 2023-03-13

【中文标题】角，二级出口路由器不工作

【英文标题】：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 中定义辅助路由，它们根本无法识别，我已经为此工作了好几个小时，但我不知道我错在哪里。

【参考方案1】：

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

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