代码之家  ›  专栏  ›  技术社区  ›  cucuru

两个路由器插座连接到不同的路由文件

  •  0
  • cucuru  · 技术社区  · 6 年前

    我试图在组件中包含一个“特定”的路由器出口。

    这是app.component.html:

    <div fxFlexFill fxLayout="column">
       <header fxFlex="40px">
           <router-outlet name="header"></router-outlet>
       </header>
      <router-outlet></router-outlet>
    </div>
    

    每个文件对应一个不同的路由文件,第一个文件指向header.routing.ts,第二个文件指向app.routing.ts。

    有可能吗?如何将任何路由器与其文件链接?

    1 回复  |  直到 6 年前
        1
  •  1
  •   samar taj Shaikh    6 年前

    是的,这是可能的,你可以使用,出口功能提供的角,下面是一个伪例子。

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
     <div class="container-fluid">
       <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
         <div class="col-12">
           <router-outlet name="left"></router-outlet>
         </div>
       </div>
       <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
         <div class="col-12 sm-12 md-12 xs-12 lg-12">
           <router-outlet name="right"></router-outlet>
         </div>
       </div>
     </div>
    </main>
    

    在路由文件中-

    const appRoutes: Routes = [{
      path: '', redirectTo: 'processi', pathMatch: 'full',
      children: [
           { path: '', component: TeamDashboardComponent, outlet: 'left' },
           { path: '', component: ChatroomComponent, outlet: 'right' }
        ]
    },
    . . .
    . . . .
    . . . . .
    }]
    

    如果你对此有任何疑问,请告诉我……