Angular 2のコンポーネントを呼び出すときにURLをTemplateUrlに渡す

Question

Angular 2（初心者）の最初のアプリで、シ​​ンプルなブログをまとめようとしています。

潜在的に何百もの記事をアーカイブする（プライマリブログからロールアウトする）ためには、記事のURLをコンポーネントの変数として渡す単一の「アーカイブ」コンポーネントを持つことが理にかなっていると思ったアーカイブされた記事リンクのページ（および検索能力のためのそれぞれ固有のURL）から、特定のアーカイブ記事のロードされたHTMLを表示するためにルータを使用するパラメータとして。これは、各記事ごとに1つずつ、そして各テンプレートのURLをハードコードするという、何百ものコンポーネントを作成するよりはるかに簡単なアプローチのようです。それを行う簡単な方法は？

const appRoutes: Routes = [ 
    { path: 'archive/:article', component: MainComponent} 
]; 

<a routerLink="/archive/article1.html".....</a> 
<a routerLink="/archive/article2.html".....</a> 

@Component({ 
    selector: 'my-selector', 
    templateUrl: this.route.snapshot.params['article'] //compiles - doesn't work 
}) 

（）あまりにも素晴らしいことが、運これまでのところでしょうngOnInitを使用する：

この場所を「記事」のようなものは、ルートパラメータが素敵だっただろうです。

アイデア？

Answer 1

1つの方法は、記事をデータベースに保存することです。各記事には固有のIDまたは名前が付けられます。あなたはルートアーカイブ/ 1またはアーカイブに行くとき

は/いくつかの-記事-nameは、それは、IDまたは名前のAPI呼び出しを行います。 apiはデータベースにヒットし、記事の内容を返します。次に、コンポーネントは単に記事の内容をレンダリングします。

次に、アーカイブされた記事に対してngForを実行できます。

<a *ngFor="let article of articles" routerLink="/archive/{article.id}".....</a> 

アーティクルにapi/dbがない場合。あなたは角度アプリ自体にも記事の配列を作成することができます。