当div缩放时，Angular 2添加路由

Question

我有一个有角度的2页单页应用。在初始屏幕上，我有几个div。单击div时，全屏div会放大并显示内容。

点击div时是否有添加网址路线的方法，例如 site.com/article1 ， site.com/article2 ......？

我尝试使用routerlink，但重定向到 site.com/article1 ，我看不到div缩放效果。

Answer 1

如果我理解正确，即使路线发生变化，您仍希望相同的视图/组件保持不变，并且您希望路线根据所关注的文章进行更改。

这样做的方法是在路线定义中为路线添加变量，如下所示：

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

单击div时，您可以添加（单击）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}`);
}

这样，即使路径发生变化，视图中也不会发生任何变化。

Answer 2

这将有效：

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

和

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