Angular2使用基於路由的模板顯示數據

Question

我正在嘗試創建一個鏈接到另一個模板的圖像的頁面。然後在該模板中，我將根據用戶點擊的圖像顯示數據。

例如，它是一個公司投資組合網站，只有圖片的工作頁面，當用戶點擊圖片（項目）時，它應該加載一個新模板，並使用插值顯示該項目的數據，即：項目標題，說明，更多圖片等。

這將節省我爲每個項目製作單獨的頁面，我研究了大約3天來找到解決方案，我認爲我應該使用服務。

我只是不知道如何路由圖像加載新模板中該項目的特定數據。

Answer 1

你可以使用一個component輸入數據：

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

而在你的主要成分的東西，如使用它：

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

其中「selectedProject」是你的主要組成部分的一個領域，點擊更改。