角度路由问题：主路由器出口上的父路由和辅助路由器出口上的子路由

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，其中包含辅助路由器出口（“ tests”）：

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

@Blauharley建议后，QuestionsComponent.html如下所示：

<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');
  }


}