Ошибка угловой маршрутизации - this.router.navigateByUrl () и this.router.navigate ()

Question

Я создаю угловое приложение, которое будет обрабатывать документацию для моих приложений GitHub более сложным способом, чем просто файлы readme. Я хочу перенаправить пользователя после нажатия в выпадающем списке topnav на выбранный маршрут, но есть проблема с маршрутизатором. (Мне нужно перенаправить с некоторыми параметрами, но это не работает даже с простым редиктом пути). Эти методы перенаправляют на целевой маршрут в течение примерно 1 секунды (например, за исключением), затем пользователь перенаправляется обратно на корневую страницу.

Код:

  /* First element is project name, second is category/part of application name */
  choices = ["typing_speed_test", "overview"]
  json = json

  constructor(private router: Router){}

  onProjectClick($event){
    this.choices[0] = $event.target.innerHTML.trim();
    this.choices[1] = "overview";
    this.redirect();
  }

  onCategoryClick($event){
    this.choices[1] = $event.target.innerHTML.trim();
    this.redirect();
  }

  redirect(){
    this.router.navigateByUrl("404");
  }

Маршруты:

const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'project/:project_name/:category', component: SubpageComponent },
    { path: '404', component: NotFoundComponent },
    //{ path: '**', redirectTo: '404', pathMatch: 'full' }
];

Ссылка на gif с проблемой: https://imgur.com/a/x2mPxvh Полный код в репозитории github: https://github.com/Dolidodzik/DocsForMyApps (если вы использовали код здесь для ответа на этот вопрос, укажите это в своем ответе)

Я думаю, что я, возможно, сделал какую-то глупую ошибку, потому что я довольно новичок в Angular, но я не смог этого сделать, потому что каждый вопрос Google показал, что я решаю ошибки ERRORS, когда перенаправление вообще не работает, а не ошибки, как вмоя ситуация.

Answer 1

Вам необходимо удалить href="#" из ваших якорных ссылок на панели навигации. Это приводит к перезагрузке браузера:

<a class="dropdown-item" *ngFor="let item of categories() | keyvalue">
  {{item.key}}
</a>

Также это немного странное решение:

this.choices[0] = $event.target.innerHTML.trim();

Вам лучше просто отправить переменную item в вызове функции в шаблоне,и вы можете прочитать это в обработчике событий вашего компонента:

onProjectClick(item){
  this.choices[0] = item.key;
  this.choices[1] = "overview";
  this.redirect();
}