Проблема угловой маршрутизации: родительский маршрут на первичной розетке маршрутизатора и дочерний (ие) на вторичной розетке маршрутизатора

Question

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

export const routes: Routes = [

  {
    path: 'tests',
    component:TestsContainerComponent, canActivate:[AuthGuard],
    children:[
      {
        path:'',
        component:TestsComponent,
        canActivate:[AuthGuard],
        outlet: 'tests'
      },
      {
        path: 'add_test',
        component:AddTestComponent, 
        canActivate:[AuthGuard],
        outlet: 'tests'},
      {
        path: 'update_test/:id',
        component:UpdateTestComponent, 
        canActivate:[AuthGuard],
        outlet: 'tests'},
      {
        path: ':id/questions',
        component:QuestionsComponent, 
        canActivate:[AuthGuard],
        outlet: 'tests',
        children:[
          {
            path: 'add_question',
            component:AddQuestionComponent, 
            canActivate:[AuthGuard],
            outlet: 'tests'},
          {
            path: 'update_question/:id',
            component:UpdateQuestionComponent, 
            canActivate:[AuthGuard],
            outlet: 'tests'
          }
        ]
      }]
  },
  {path: 'error', component: ServerErrorComponent},
  { path: '**', redirectTo: '' }
];

@NgModule({
  exports: [
    RouterModule
  ],
  imports: [
    CommonModule,
    UsersModule,
    RouterModule.forRoot(routes)
  ],
  declarations: []
})
export class RoutingModule {}

Импорт исключен для краткости. Проблема с компонентом кнопки:

<p>
   <button class="btn btn-primary"  
           [routerLink]="[{ outlets: {  tests: ['add_question'] } }]">
           ADD QUESTION
   </button>
</p>

Он не будет переходить к нужному компоненту AddQuestionComponent. Кто-нибудь может предложить какое-либо решение? Любая помощь приветствуется. PS: Это моя композиция TestsComponent.html:

<p>
  <input type="text" 
  #search 
  class="form-control"
  (keyup)="searchTests(search.value)" 
  placeholder="Search... " />
</p>
<p>
  <button class="btn btn-primary" [routerLink]="[{ outlets: { tests: ['add_test'] } }]">ADD TEST</button>
</p>
<div class="row">   
    <table class="table table-striped">
      <thead class="header">
        <th scope="col">
          No
        </th>
        <th scope="col">
          Name
        </th>
        <th scope="col">
          Description
        </th>
        <th scope="col">
          Type
        </th>
        <th scope="col">
          No. questions
        </th>
        <th scope="col">
          Action
        </th>
      </thead>
      <tbody>
        <tr *ngFor="let test of filteredTests;index as i" scope="row">
          <td>{{ i+1 }}</td>
          <td>{{ test.testName }}</td>
          <td>{{ test.description }}</td>
          <td>{{ test.testType.typeName }}</td>
          <td>{{ test.numberOfQuestions }}</td>
          <td ngbDropdown class="nav-item dropdown">

                <div >
                  <button class="btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>...</button>
                  <ul ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdown08">
<!-- This one work well, it goes to my QuestionsComponent -->
                    <li [routerLink]="[{ outlets: { tests: [test.id,'questions'] } }]" class="dropdown-item">
                          Questions
                    </li>
                    <li [routerLink]="[{ outlets: { tests: ['update_test',test.id] } }]" class="dropdown-item">
                      Update
                    </li>
                    <li (click)="deleteTest(test)" class="dropdown-item">
                        Delete
                    </li>
                  </ul>
                </div>
          </td>
        </tr>
      </tbody>
    </table>  
</div>

Это мой AppComponent.html:

<div class="container">
    <div class="mb-4">
                <app-navbar></app-navbar>    
    </div>
    <router-outlet></router-outlet> 
  </div>

И это мой TestContainer.html, который содержит вторичный маршрутизатор («тесты»):

 <div class="row">
        <div class="col-2">
            <div class ="mb-4">
                <app-tests-navbar></app-tests-navbar>
            </div>
        </div>
        <div class="col-10">
            <div class ="mb-4">
                <router-outlet name="tests"></router-outlet>
            </div>
        </div>           
    </div>

Это компонент подменю (TestsNavbarComponent), который я реализовал:

<ul class="list-group">
    <a href="#" class="list-group-item list-group-item-action">Test types</a>
    <a class="list-group-item list-group-item-action" 
        routerLink="/tests">
        Tests
    </a>
    <a href="#" class="list-group-item list-group-item-action">Question types</a>
</ul>

QuestionsComponent.html выглядит так после @Blauharley sugestion:

<p>
    <input type="text" 
    #search 
    class="form-control"
    (keyup)="searchQuestion(search.value)" 
    placeholder="Search... " />
  </p>
  <p>

   <a class="btn btn-primary"  
            [routerLink]="['/tests',{outlets:{'tests':[testId,'/questions', {outlets:{'tests':['add_question']}}]}}]">>
      ADD QUESTION
    </a> 

  </p>

И класс контроллера Typescript (QuestionsComponent.ts):

@Component({
  selector: 'app-questions',
  templateUrl: './questions.component.html',
  styleUrls: ['./questions.component.css']
})
export class QuestionsComponent implements OnInit {

  testId:number;
  constructor( private route: ActivatedRoute) { }

  ngOnInit() {
    this.testId=+this.route.snapshot.paramMap.get('id');
  }


}