Angular 尝试更改为组件时出现 6+ 路由问题

Question

我有一个搜索框下拉列表，当您输入查询时 returns 会出现一个结果列表。单击结果会将您带到该组件进行查看。当您使用主页上的搜索时，这会按预期工作。一旦您尝试从搜索到的地方使用搜索，浏览器中的 URL 就会改变，但内容不会改变。

我认为这只是初学者对路由工作方式的错误，但我终究无法弄清楚我做错了什么。

搜索-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}`]);
  }

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

app.routing.ts

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

我怀疑问题是我在 'main' html 文件上只有一个路由器插座。

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>

我做错了什么？

Answer 1

我无法发表评论，所以我将其添加为答案。

您的所有路由设置都是正确的。当您在主页上时它起作用的原因是因为 url(videos/:id) 是新的并且它被 angular 路由器首次激活。

由于您使用的是动态路由，（即只有 id 的值发生变化），该组件将保持不变。（即该组件已经被激活并且没有被加载两次）。所以我相信您已经对 url 更改和 pass/set VideoItemComponent 中的值做出反应。

Angular 尝试更改为组件时出现 6+ 路由问题

Angular 6+ routing issue when trying to change to components

angular2-routing

angular