Question

Angular 2中的第一个应用程序（新手），我正在尝试组建一个简单的博客......除了一件事，一切都很好。

为了存档可能有数百篇文章（当他们从主要博客上滚动），我认为有一个单一的＆＃34;存档＆＃34;组件，我将文章的URL作为变量传递给组件，或者作为参数使用路由器从存档文章链接页面显示特定存档文章的加载HTML（以及每个搜索的唯一URL）能力）。这似乎比创建数百个组件（每篇文章一个，并对每个模板URL进行硬编码）简单得多。有什么简单的方法吗？

像这样的东西＆＃34;文章＆＃34;路线参数本来不错：

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或存档/某物品名称时，它将使用ID或名称进行api调用。然后，api将访问数据库并返回文章内容。然后你的组件将只呈现文章内容。

然后你可以为存档的文章做一个ngFor。

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

如果您没有文章的api / db。你也可以在角度应用程序中创建一个文章数组。

在Angular 2中调用组件时将URL传递给TemplateUrl

1 个答案: