Question

我有三张牌。

<div class="container"><div class="row"><div class="col col-4"><div class="card" style="width: 20rem;">
    <img class="card-img-top" src="./assets/img/aplicativo.jpg" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Funções do aplicativo</h4>
      <p class="card-text">Clique aqui se deseja ver apenas as documentações para o aplicativo CondomínioApp.com.</p>
      <a routerLink="fnapp" class="btn btn-primary">Vamos lá!</a>
    </div>
</div></div><div class="col col-4">
<div class="card" style="width: 20rem;">
    <img class="card-img-top" src="./assets/img/sistema.jpg" alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title">Funções do sistema</h4>
      <p class="card-text">Clique aqui se deseja ver apenas as documentações para o sistema CondomínioApp.com.</p>
      <a routerLink="fnweb" class="btn btn-primary">Vamos lá!</a>
    </div>
  </div></div><div class="col col-4">
      <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="./assets/img/ambos.jpg" alt="Card image cap">
          <div class="card-block">
            <h4 class="card-title">Todas as funções</h4>
            <p class="card-text">Clique aqui se deseja ver a documentação para todas as funções do CondomínioApp.com.</p>
            <a [routerLink]="[fnapp,fnweb]" class="btn btn-primary">Vamos lá!</a>
          </div>
        </div></div></div></div>

<router-outlet></router-outlet>

卡片＃1和＃2将在它们下方（一个或另一个）打开一个部分，目的是让卡片＃3同时显示前两张卡片（就像使用{{1}一样难以尝试}。

我也试过创建一个辅助[routerLink]="[fnapp,fnweb]"，但它远不是解决方案，因为它也在两者之间切换，我可以有一个显示两次的部分。

router-outlet处的路径：

@NgModule

提前致谢。

<小时/>

编辑：

我尝试使用插座，但控制台总是会给我这个：@NgModule({ declarations: [ FnwebComponent, FnappComponent, AppComponent, SearchPipe ], imports: [ NGB_MODULES, BrowserModule, FormsModule, RouterModule.forRoot([ {path: '', redirectTo: 'index', pathMatch: 'full'}, {path:'fnweb',component:FnwebComponent}, {path:'fnapp',component:FnappComponent} ]), AngularFontAwesomeModule, NgbAccordionModule.forRoot(), NgbModalModule.forRoot()], providers: [ ], exports: NGB_MODULES, entryComponents: [ FnwebComponent, FnappComponent ], bootstrap: [ AppComponent ] })。在这种情况下，我创建了另一个组件，我在第三个卡中调用两个卡而不是为它创建一个函数，如： Error: Uncaught (in promise): Error: Cannot match any routes.。它有效。

Answer 1

也许您可以尝试命名路由：http://onehungrymind.com/named-router-outlets-in-angular-2/

根据评论进行编辑：

路由配置：

{
path: 'card1',
component: card1,
outlet: 'card1'
}, 
{
path: 'card2',
component: card2,
outlet: 'card2'
},

<强> HTML

<a [routerLink]="[{ outlets: { card1: ['card1'] } }]">Card1</a>
<a [routerLink]="[{ outlets: { card2: ['card2'] } }]">card2</a>
<a [routerLink]="[{ outlets: { card1: ['card1'] }, 
    { card2: ['card2'] } }]">Card3</a>

<router-outlet name="card1"></router-outlet>
<router-outlet name="card2"></router-outlet>

我不确切知道这是否是你需要的。我没有测试它，所以可能有这样的问题，但这是主意。如果要在激活路由期间关闭card1，则需要关闭另一个，例如：

 outlets: { card1: null }}

在同一台路由器插座中打开两个routerLinks

编辑：

1 个答案: