*ngFor데이터베이스에 저장된 하위 구성 요소 항목의 모든 인스턴스를 렌더링 하는 부모 구성 요소가 있습니다. 기본적으로 모두 축소되어 있습니다. &는 하위 구성 요소 인스턴스의 클릭 이벤트를 전달하는 토글 함수를 호출하여 확장 할 수 있습니다.
부모 구성 요소에 의해 렌더링 된 모든 자식 구성 요소 인스턴스를 토글해야하는 단추를 부모 구성 요소에 추가하고 싶습니다.
부모 구성 요소
<a class="btn btn-primary" (click)="ToggleAllVersions()">Expand All</a>
<version *ngFor="let version of versionService.versions | async" [version]="version"></version>
.
@Component({ selector: 'parent', templateUrl: './parent.component.html',})
ToggleAllVersions(){
//add class to specific element in each version of versionService.versions
}
하위 구성 요소
<div class="first-element">
<div class="//toggle class here by calling ToggleAllVersions() in parent componant."></div>
</div>
내가 한 일은 @ViewChildren다음과 같이 사용 하는 것입니다.
부모 구성 요소
@ViewChildren(VersionComponent) private allVersions!: QueryList<VersionComponent>;
isAllExpanded = false;
expandAndCollapse(){
this.isAllExpanded = !this.isAllExpanded;
this.allVersions.forEach(v=>v.isExpanded = this.isAllExpanded);
}
하위 (버전) 구성 요소
isExpanded = false;
매력처럼 작동합니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다