Angular2基于路由的模板显示数据答案

【问题标题】：Angular2 display data with template based on routingAngular2基于路由的模板显示数据
【发布时间】：2016-12-14 13:16:01
【问题描述】：

我正在尝试创建一个包含链接到另一个模板的图像的页面。然后在该模板中，我将根据用户单击的图像显示数据。

例如，它是一个公司投资组合网站，有一个只有图像的工作页面，当用户单击图像（项目）时，它应该加载一个新模板并使用插值显示该项目的数据，即：项目标题、描述、更多图片等。

这将节省我为每个项目制作单独的页面，我已经研究了大约 3 天以找到解决方案，我认为我应该使用服务。

我只是不知道如何路由图像以在新模板中加载该项目的特定数据。

【问题讨论】：

标签： angular service routing

【解决方案1】：

您可以使用带有输入数据的组件：

@Component({
selector: 'poject-data',
template: '...',
})
export class ProjectDataComponent {
  private contentUrl: SafeResourceUrl;
  @Input() project: Project;
  ...
}

并在您的主要组件中使用它，例如：

<project-data project="selectedProject" *ngIf="selectedProject != null"></project-data>

其中“selectedProject”是您的主要组件的一个字段，在点击时会发生变化。

【讨论】：