在Angular 2中調用組件時將URL傳遞給TemplateUrl

Question

Angular 2（新手）中的第一個應用程序，我試圖將一個簡單的博客放在一起......除了一件事情之外，一切都很好。

要歸檔潛在的數百篇文章（當他們滾出主博客時），我認爲有一個單獨的「歸檔」組件可用於將文章的URL作爲組件的變量傳遞給組件或作爲使用路由器從歸檔文章鏈接頁面（以及每個用於搜索能力的唯一URL）顯示特定歸檔文章的加載HTML的參數。這似乎比創建數百個組件的方法簡單得多，每篇文章一個，並對每個模板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

一種方法是將文章存儲在數據庫中。每篇文章都有一個唯一的ID或名稱。

當您轉到路由存檔/ 1或存檔/ some-article-name時，它將使用id或名稱進行api調用。然後api將打到數據庫並返回文章內容。然後你的組件只會呈現文章內容。

然後你可以爲存檔文章做一個ngFor。

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

如果您沒有文章的api/db。您也可以在角度應用程序本身中創建一組文章。