같은 페이지에 두 개의 Angular2 구성 요소가 있습니다.

저는 Angular2를 살펴보기 시작했습니다. 정말 재미있을 것 같습니다.같은 페이지에 두 개의 Angular2 구성 요소가 있습니다.

{ 
    path: 'artists', 
    component: ArtistComponent, 
    children: [ 
     { path: ':id', component: ArtistsDetailComponent }, 
     { path: '', component: ArtistsHomeComponent }, 
    ] 
},

아이디어가 왼쪽 아티스트 목록 (ArtistComponent)를 보여주고 클릭하면이 상세보기 (ArtistsDetailComponent)가있을 것입니다 열 :이 같은 경로를 구성 할 경우

은 오늘이 문제에 발견 오른쪽에.

ArtistsComponent 템플릿은/artists/: id로 이동할 때 왼쪽에있는 기사 목록과 오른쪽에있는 상세보기 (이 라우터 콘센트에 있음)를 볼 수 있습니다.

이 두 구성 요소가 서로 통신해야한다는 점을 제외하고는 모두 좋았으므로 세부적인보기를 변경할 때는 목록에서 변경해야합니다. 인터넷 검색을 할 때

는, 내가 변수 매핑 정보와 함께 구성 요소 선택기를 사용하도록 참조 :

<artist-detail [artist]="selectedArtist"></artist-detail>

하지만 그때 나는 오류가 나는 라우터 콘센트가없는 각도 모르는라고 말하는 ArtistsDetailComponent 뷰를 넣을 위치 ...

전문가가 도와주세요 ...! :)

출처

2016-07-13 Mr. M

정확한 오류를 복사하여 붙여 넣으시겠습니까? –

[여러 콘센트] (https://angular.io/docs/ts/latest/api/router/index/RouterConfig-type-alias.html)를 사용해야하는 경우처럼 들립니다. 정확히 무엇을 찾고 있으며 현재 문제가있는 실험 단계에 있지만, 조사 할 시간이 가치가 있습니다. –

두 가지 상반된 접근법이 있습니다. 어느 경우 든 하위 경로를 사용하면 세부 구성 요소가 <router-outlet>에 포함되어야하거나 세부 구성 요소를 <artist-detail>과 같이 '수동으로'포함해야합니다. 템플릿 (자식 경로 및 템플릿에 수동 포함)을 혼합하려고했기 때문에 라우터는 자식 경로 구성 요소를 넣을 콘센트를 찾을 수 없다고 불평했습니다.

자식 경로를 포기하고 [] 구문을 사용하여 매개 변수를 전달하거나 하위 경로를 사용하면 세부 구성 요소가 경로 매개 변수에서 ID를 추출하고 세부 정보를 수집해야합니다. 세부 사항을 수집하는 방법은 모델에 따라 다릅니다. 나는 Redux에서 응용 프로그램 상태를 유지하고 거기에서 얻을 수 있습니다. 공유 서비스도 사용할 수 있습니다.

출처

2016-07-13 21:09:08 smyk

감사합니다. 덕분에이 기능을 사용할 수있었습니다. 그래서 자식 경로를 포기했지만 ('path : 'artist/: id' '와 동일한 유형의 URL을 가지고 있으며) 수동으로''구성 요소를 임베드했습니다. 'artist/: id' 경로는 'Artist-Detail>'을 통해 옆에있는 아티스트와 세부 정보 목록을 표시하는 ArtistComponent를 사용하고 있습니다. 이전에 자식 경로를 풀려고 시도했지만 같은 페이지에 목록과 세부 정보를 모두 표시하는 방법을 알아낼 수 없었습니다. 필요한 작업은'Artists/: id'가'ArtistsComponent' (list)를 사용하도록 경로를 지정하는 것이 었습니다. 'ArtistsDetailComponent' (세부 사항)가 아닙니다. #embarrassing –

같은 페이지에 두 개의 Angular2 구성 요소가 있습니다.

답변

관련 문제