角形；引导程序 5；手风琴内的路由器插座，或列表

如何解决角形；引导程序 5；手风琴内的路由器插座，或列表

我在手风琴的手风琴体内有一个路由器插座。我没有正确实现它，因为如果我从另一个选项卡导航到它，它就不起作用，但如果我刷新页面，它就会起作用。代码如下：

<div class="accordion" id="lessonAccordion" *ngIf = "this.lessonsService.lessons.length >= 1 && !this.lessonsService.isLoading">
    <div class = "accordion-item" *ngFor = "let lesson  of this.lessonsService.getAllLessons(); let i = index">
        <div class="accordion-header" [attr.id]="'heading' + i">
            <button
                class="accordion-button"
                data-bs-toggle="collapse"
                [attr.data-bs-target]="'#collapse' + i"
                style="cursor: pointer;"
                [routerLink]="[lesson.lesson_datetime]"
                routerLinkActive="active"
            >
                <div>
                <h5>{{ lesson.lesson_datetime | date:'EEEE,d LLLL,y h:mm aa'}}</h5>
                <p>Teacher: {{ lesson.teacher_displayname }}</p>
                </div>
            </button>
        </div>
        <div [id]="'collapse' + i" class="accordion-collapse collapse" data-bs-parent="#lessonAccordion">
              <div class="accordion-body">
                  <router-outlet></router-outlet>    <!-- Here is the router outlet -->
              </div>
        </div>
    </div>
</div>

这里是路线：

{path: 'conversation',component: ConversationComponent,canActivate: [AuthGuard],children: [
{path: '',component: LessonStartComponent},{path: ':id',component: LessonDetailsComponent}

单击手风琴项目时会发生两种情况之一，具体取决于页面是否重新加载。如果不重新加载，尽管浏览器中的 URL 显示了正确的 id，它仍会采用空路径 '' 并且我可以看到正确的 id 已传递给 LessonDetailsComponent 的实例。如果页面被刷新，那么对于手风琴中的每个手风琴按钮都会在 LessonDetailsComponent 上点击一次，但它可以工作 - 在任何一种情况下都会加载数据。

我对此很困惑，希望有人能解释如何解决它。