Angular2使用基于路由的模板显示数据

Question

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

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

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

我无法弄清楚如何路由图像以在新模板中加载该项目的特定数据。

Answer 1

您可以使用包含输入数据的组件：

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

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

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

其中＆＃34; selectedProject＆＃34;是主要组件的一个字段，可在单击时更改。