2017-01-15 11 views
0

角2の単一ページアプリケーションがあります。初期画面では、いくつかのdivがあります。 divをクリックすると、フルスクリーンのdivがスケールアップされ、コンテンツが表示されます。 site.com/article1よう角度2は、倍精度浮動小数点数を調整したときのルートを加算します。

div要素がクリックされたURLルートを追加する方法はあり、site.com/article2 ...?

routerlinkを使用しようとしましたが、site.com/article1にリダイレクトされましたが、divスケーリング効果が表示されません。

+0

'のURLを追加すると、何を意味route'のでしょうか?おそらくあなたは 'router.navigate()'を意味する –

+0

私は記事1 divをクリックすると、urlはsite.com/article1を表示します。私は(クリック)= "divClick()"を試してからrouter.navigate、しかし運は無かった –

答えて

0

これは動作します:

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

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

私が正しく理解していれば、ルートが変更されても同じビュー/コンポーネントが維持され、どのアーティクルにフォーカスがあるかによってルートを変更する必要があります。あなたのdivに

{ 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}`); 
} 

この方法は、何も実際にパスが変化していても、ビューに変更されます。

+0

これは間違いなく正しいルートにリダイレクトされますが、ブラウザがリロードします... –

+0

残念です。代わりに[routerLink] = "['/articles/$ {article} ']" 'を試してください。コンストラクタに 'private route:ActivatedRoute、private router:Router 'があることを確認してください。 – Joakim

関連する問題