Angular 角度6+；尝试更改为组件时的路由问题

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

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

搜索组件.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>

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

app.routing.ts

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

我怀疑问题在于“主”html文件上只有一个路由器出口

app.component.html

---

我做错了什么

我无法发表评论，因此我添加它作为答案

您的所有路由设置都是正确的。当你在主页上时，它工作的原因是url（videos/：id）是新的，并且它第一次被路由器激活

---

由于您使用的是动态路由（即仅id的值发生更改），因此组件将保持不变（即此组件已被激活且未加载两次）。因此，我相信您已经对url更改做出了反应，并在VideoItemComponent中传递/设置了值。

您的路由在我看来很好。你所说的“内容没有”是什么意思？你能浏览你想要的页面吗？对不起，我知道这不是很清楚。如果我转到一个搜索结果（视频）并再次搜索，当单击新的搜索结果时，URL将更改为视频的正确ID，但是我仍然坐在旧的搜索结果旁。你把路由器插座放在哪里了？显示有关它的更多代码。是否尝试更改

路由

数组中元素的顺序？默认的匹配算法是前缀匹配，因此任何以

视频开始的路由都将与第一个匹配。很乐意帮忙
const routes: Routes = [
  {path: 'videos', component: VideoListComponent},
  {path: "videos/:id", component: VideoItemComponent}
];

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