Javascript 引导模式下的两个角度路由器OULET

我在角度应用程序中添加了其他模态，它们都有不同的

前一个工作正常，但在添加具有不同路线的第二个模式后，第1个停止工作。我在路由器出口上尝试了不同的

name

属性，但似乎没有任何效果。 如果我把另一个注释掉，一次只能有一个有效

<button type="button" data-target="#settings2" data-toggle="modal" routerLink="setup_season">                         
   Season
</button>

<button type="button" data-target="#settings" data-toggle="modal" routerLink="setup_package">                         
  Package
</button>

季
包裹

第一模态

 <div id="settings" class="modal fade" role="dialog">
      <div class="modal-dialog">

         <!-- Modal -->
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

          <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <router-outlet></router-outlet> // already tried with name attribute
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>

        </div>
      </div>

&时代；
模态头
//已尝试使用name属性
关

第二模态

<div id="settings2" class="modal fade" role="dialog">
  <div class="modal-dialog">

     <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <router-outlet></router-outlet> // already tried with name attribute
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

&时代；
模态头
//已尝试使用name属性
关

您需要使用辅助路由，我将粘贴我自己代码的类似案例，尝试对您的代码执行相同操作：

  <div class="side-panel">
      <!-- the auxiliary outlet -->
      <router-outlet name="sidePanel"></router-outlet>
  </div>

  <div class="main-content m-0 p-0">
      <!-- the primary outlet -->
      <router-outlet></router-outlet>
 </div>

最后，您需要在routerLink中提到插座的名称，如下所示：

  <a [routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]">

你能提供stakblitz复制吗？我试着制作stackbkitz，但引导模式在其中不起作用。所以我留下了它。我在两个路由器出口上都有5+个路由器。行吗？因为我试过了，但没有成功。

[routerLink]=“[{outlets:{sidePanel:{sidemenu'}}]”

这个属性对我有效。我正在执行

辅助路由

，但在

标记上缺少路由的此属性。谢谢，它成功了。@Najamussakib很高兴我帮了忙！

  <a [routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]">