Angular2는 라우팅 기반 템플릿을 사용하여 데이터를 표시합니다.

Question

다른 템플릿에 연결된 이미지가 포함 된 페이지를 만들려고합니다. 그런 다음 해당 템플릿 내에서 사용자가 클릭 한 이미지를 기반으로 데이터를 표시합니다.

예를 들어 회사 포트폴리오 사이트이고 이미지가있는 작업 페이지가 있습니다. 사용자가 이미지 (프로젝트)를 클릭하면 새 템플릿을로드하고 해당 프로젝트의 데이터를 보간하여 표시합니다. 예 : 프로젝트 제목, 설명, 더 많은 이미지 등.

이렇게하면 각 프로젝트마다 별도의 페이지를 만들지 않아도됩니다. 솔루션을 찾기 위해 약 3 일 동안 조사했고 서비스를 사용해야한다고 생각합니다.

새 템플릿에서 해당 프로젝트의 특정 데이터를로드하기 위해 이미지를 라우팅하는 방법을 알 수 없습니다.

당신은 입력 데이터와 구성 요소를 사용할 수

Answer 1

:

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

과 같은 것을 사용하여 주요 구성 요소에서 사용 : "selectedProject는"주요 구성 요소의 필드

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

그 클릭하면 변경됩니다.