Проблема угловой маршрутизации 6+ при попытке перехода на компоненты - PullRequest
Новая
       6

Проблема угловой маршрутизации 6+ при попытке перехода на компоненты

0 голосов
/ 12 ноября 2018

У меня есть раскрывающееся окно поиска, которое при вводе запроса возвращает список результатов. Нажав на результат, вы перейдете к этому компоненту для просмотра. Это работает, как и ожидалось, когда вы используете поиск, скажем, на домашней странице. Как только вы пытаетесь использовать поиск, откуда вас ведет поиск, 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}
];

Я подозреваю, что проблема в том, что у меня есть только один маршрутизатор-розетка в «основном» 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>

Что я здесь не так сделал?

1 Ответ

0 голосов
/ 12 ноября 2018

Я не могу комментировать, поэтому я добавляю это как ответ.

Все ваши настройки маршрутизации верны. Причина, по которой он работает, когда вы находитесь на домашней странице, заключается в том, что URL-адрес (videos /: id) является новым и его впервые активирует угловой маршрутизатор.

Поскольку вы используете динамическую маршрутизацию (т. Е. Изменяется только значение идентификатора), компонент останется прежним (т. Е. Этот компонент уже активирован и не загружается дважды). Поэтому я считаю, что вы реагируете на изменения URL и передаете / устанавливаете значения в VideoItemComponent.

...