尝试更改为组件时出现角度6+布线问题

我有一个搜索框下拉列表,当你输入一个查询时,它会返回一个结果列表。单击结果将带您转到要查看的组件。当您使用主页上的搜索时,这会如预期的那样起作用。一旦您尝试从搜索的位置使用搜索,浏览器中的URL就会改变,但内容不会改变。

我认为这只是初学者在路由工作原理上的一个错误,但我一辈子都无法找出我做错了什么。

search-component.html

<div *ngIf="hasSearchResults">
  <div class="search-results">
    <ul>
      <li *ngFor="let video of searchResults" class="search-results-item">
        <div class="columns" (click)="goToSearch(video.id)">
          <div class="column is-narrow">
            <figure class="image is-32x32">
              <div *ngIf="video.cover;else noThumbnail">
                <img src="http://localhost:8080/videos/t/{{video.cover.id}}" class="rounded">
              </div>
              <ng-template #noThumbnail></ng-template>
            </figure>
          </div>

          <div class="column">
            <p>{{video.name}}</p>
            <p class="metadata">{{video.absolutePath}}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

search-component.ts

  public goToSearch(id: string) {
    this.router.navigate([`videos/${id}`]);
  }

现在这一切都可以在网站的任何地方进行,只要它不在视频组件上。

const routes: Routes = [
  {path: 'videos', component: VideoListComponent},
  {path: "videos/:id", component: VideoItemComponent}
];

app.component.html

<div class="section">
  <div class="columns">

    <div class="column is-narrow">
      <app-sidebar></app-sidebar>
    </div>

    <div class="column is-main-content">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

我做错了什么?