부모 구성 요소의 모든 입력과 출력을 HTML이 아닌 Typescript로 어떻게 이동합니까?
부모의 긴 매개 변수 목록과 함께 다음과 같이 자식 구성 요소에서 데이터를 보내고받습니다. 그들이 Typescript에 있기를 바랍니다. 어떻게 양도 할 수 있습니까?
<app-address-type-dropdown class="addresstype" (addressTypeChange)="addressTypeChangeEvent($event)"
[addressTypeDefaultItem]="addressEntryConfig.addressTypeDefaultValue"
[selectedAddressType]="addressEntryConfig.selectedAddressType"
[valuesToExclude]="addressEntryConfig.addressTypeDropdownListExclusion">
</app-address-type-dropdown>
목표 :
<app-address-type-dropdown> </app-address-type-dropdown>
<!-- With input and output parameters in the Typescript file -->
서비스를 활용하면 부모와 자식이 너무 연결되어있는 강력한 유형의 구성 요소가 남을까요? 서비스에서 가능하거나 불가능한 경우 스마트 덤 아키텍처 전략을 선호하십시오.
다음과 같이 하위 구성 요소에 대한 참조를 가져 @ViewChild오고 입력 속성을 설정하고 상위 구성 요소 코드의 이벤트를 구독 할 수 있습니다.
@ViewChild(AddressTypeDropdownComponent, { static: false }) child: AddressTypeDropdownComponent;
ngAfterViewInit() {
// Subscribe to the child component event
this.child.addressTypeChange.subscribe(value => {
console.log(value);
});
}
someMethod() {
// Set the input values of the child component
this.child.addressTypeDefaultItem = someValue1;
this.child.selectedAddressType = someValue2;
}
데모는 이 stackblitz 를 참조하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다