在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。您也可以在角度应用程序本身中创建一组文章。