Угловая 2 добавить маршрут, когда div scaled

Question

У меня есть угловое приложение с двумя страницами. На экране init у меня есть несколько div. Когда щелкает div, полный экран div масштабируется и отображает содержимое.

Есть ли способ добавления URL-адрес маршрута при щелчке DIV, как site.com/article1, site.com/article2 ...?

Я пробовал использовать routerlink, но это перенаправляет на site.com/article1, и я не вижу эффект масштабирования div.

Answer 1

Это будет работать:

changeRoute(route: string): void { 
    this._location.go(`articles/${route}`); 
} 

и

(click)="changeRoute('article1')" 

Answer 2

Если я правильно вас понимаю, вы хотите, чтобы один и тот же вид/компонент сохранялся, даже если маршрут изменяется, и вы хотите, чтобы маршрут изменялся в зависимости от того, какая статья находится в фокусе.

Способ сделать это, чтобы добавить переменную в маршрут, в определении маршрута, как это:

{ path: 'articles/:articleNumber' component: ArticleComponent} 

И когда ДИВ нажата, вы добавляете (нажмите) на ваш DIV, и сделать он переместится к статье в div, который был нажат. Это может выглядеть примерно так:

<div (click)="navigate('Article1')">/*Div content goes here*/</div> 

//TODO: Get article name dynamically, based on the article that was clicked 

В компоненте:

navigate(article: string): void { 
    this.router.navigate(`/articles/${article}`); 
} 

Таким образом, ничто не будет на самом деле изменить в представлении, даже если изменения пути.