Два маршрутизатора-выхода Angular в модальном режиме начальной загрузки

Я добавил другой модальный режим в свое приложение Angular, оба имеют разные

<router-outlet></router-outlet>

Предыдущий работал нормально, но после добавления 2-го модала с разными маршрутами 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>

2-й модальный

<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>

javascript angular bootstrap-modal angular-routerlink angular-router
person Najam Us Saqib    schedule 20.05.2020    source источник
comment
Можете ли вы предоставить репродукцию стакблица?   -  person Furqan S. Mahmoud    schedule 20.05.2020
comment
Я пытался сделать stackbkitz, но в нем не работали модальные окна начальной загрузки. Так что я оставил его.   -  person Najam Us Saqib    schedule 20.05.2020

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно использовать вспомогательные маршруты, я вставлю аналогичный случай своего кода, попробуйте сделать то же самое с вашим кодом:

  <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>

Конфигурации маршрутов должны быть примерно такими:

const routes: Routes = [
  {
    path: '',
    redirectTo: '/app/auth/login',
    pathMatch: 'full'
  },
  {
    path: 'app',
    children: [
       {
         path: 'main',
         component: MainComponent
       }, 
       {
         path: 'side-menu',
         component: SlidePanelComponent,
         outlet: 'sidePanel',  // You need to mention the name of the auxiliary route
       }
     ]
]

Наконец, вам нужно указать имя розетки в routerLink вот так:

  <a [routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]">
person Furqan S. Mahmoud    schedule 20.05.2020
comment
У меня 5+ маршрутов на обоих выходах роутера. Заработает? Потому что я пробовал, и они не работали. - person Najam Us Saqib; 20.05.2020
comment
[routerLink]="[{ outlets: { sidePanel: 'side-menu'}}]" Этот атрибут работал у меня. Я выполнял auxiliary routes, но пропустил этот атрибут для маршрутизации в моих тегах <a>. Спасибо, это сработало. - person Najam Us Saqib; 21.05.2020
comment
@NajamUsSaqib Рад, что помог! - person Furqan S. Mahmoud; 22.05.2020