RouterLink в Angular с использованием Javascript

Question

Я пытаюсь использовать метод javascript, похожий на routerLink в HTML, но использующий Javascript.

Я пробовал с window.location, но результат не тот, так как эта команда обновляет веб-сайт для перехода с одного URL на другой. Есть ли возможность перейти с одного компонента на другой, как это делает routerLink (без обновления)?

Решение

Я просил router.navigateByUrl('/url')

Answer 1

Это window.location.hash, что вы можете изменить без перезагрузки. Это можно использовать и для создания SPA, если вы не хотите связываться с history.pushState()

window.addEventListener( 'hashchange', event => {
  console.log( `should render page: ${ window.location.hash }` )
});

<a href="#/home">Home</a>
<a href="#/page1">Page 1</a>
<a href="#/page2">Page 2</a>
<a href="#/page3">Page 3</a>

Это имеет и другие недостатки по сравнению с history.pushState(), такие как оптимизация поисковой системы и тому подобное. Но это самый простой способ сделать одностраничную маршрутизацию приложений. Так что это зависит от того, что вы строите, будет ли этого достаточно или нет.

Если вы используете угловой, просто используйте угловой маршрут.

Answer 2

Внутренняя реализация директивы routerLink использует не API window.location, а API window.history, точнее, функцию window.history.pushState() ( Source ).

То же самое относится к каждому SPA Framework.