다음과 같이 상위 구성 요소에서 여러 개의 동일한 하위 구성 요소를 참조합니다. 
다음과 같이 두 개의 파일 업로드 컨트롤을 생성하는 효과가 있습니다. 
컨트롤은 입력 및 레이블을 사용하여 시뮬레이션되므로 컨트롤 변경 사항을 업로드할 때 파일 이름을 가져와서 표시할 컨트롤에 제공해야 합니다. 컨트롤은 관련 바인딩 변수를 바인딩합니다.
그런데 두 번째 컨트롤을 클릭하면 첫 번째 컨트롤의 값이 항상 변경되는데 두 번째 컨트롤이 응답하지 않는 이유는 무엇입니까? 
업데이트
죄송합니다. 게시물 구성 요소 템플릿을 잊어버렸습니다: 
문제는 템플릿에 있습니다. 입력 ID에 해당하는 레이블을 사용했습니다. 그러나 ID는 처음에 제가 작성했기 때문에 다음 작업은 첫 번째 ID에만 해당됩니다. 그리고 역동적으로 만들어 보세요~
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
초대해 주셔서 감사합니다. 제공된 코드가 너무 적습니다. . .
문제 원인:
1. 라벨 CSS 문제 예를 들어, 첫 번째 라벨이 너무 커서 두 번째 영역을 클릭한 것으로 잘못 생각했습니다.
2. 파일 업로드 구성 요소의 범위는 격리되지 않습니다. 그 중 상위 CTRL을 의미합니다.
두 번째 컨트롤을 클릭해도 여전히 첫 번째 컨트롤이 표시되어야 합니다. 두 컨트롤을 식별하지 않았기 때문인 것 같습니다.
과 같은 여러 컨트롤 조합에 사용됩니다.해결책:
Angular 2에서는 일반적으로 @Viewchild 또는 @Viewchildren을 사용하여 구성 요소 중첩을 위한 구성 요소 식별자를 정의합니다.
@Viewchild는 일반적으로 단일 컨트롤에 사용됩니다.
@Viewchildren은 li
따라서 템플릿에서 다음과 같이 작성할 수 있습니다:
<cy-page-fileUploadEle #upload1></cy-page-fileUploadEle>
<cy-page-fileUploadEle #upload2></cy-page-fileUploadEle>
그런 다음 class
전화할 때 다음과 같이 적어주시면 됩니다:@Viewchild("upload1") upload1: CyPageFileUPloadEle;(컨트롤의 클래스 이름)
@Viewchild("upload2") upload2: CyPageFileUPloadEle(컨트롤의 클래스 이름)에서 다음 두 속성을 정의합니다.
this.upload1.nativeElement....
작성하면 input[type="file"]의 투명도를 0으로 직접 설정하고 크기는 아래 항목만 덮게 되므로 레이블의 for 속성에 대해 걱정할 필요가 없습니다. - -