时间戳

首页 > 解决方案 > 尝试更改为组件时出现 Angular 6+ 路由问题

angular - 尝试更改为组件时出现 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>

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}
];

我怀疑问题是我在“主”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>

我在这里做错了什么？

标签： angularangular2-routing

解决方案

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

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

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

推荐阅读