'Parent'와 'Child'구성 요소가 있는데 Parent에서 자식을 추가하거나 제거 할 수 있습니다. 그래서 아이들은 역동적입니다. 부모에서 아래와 같이 루프에서 자식 구성 요소를 렌더링했습니다.
Parent.component.html
<child *ngFor="let child of children" [data]="child"></child>
이제 자식 구성 요소에서 IsValid ()라는 함수를 추가하여 자식이 유효한지 여부를 확인했습니다.
Child.component.ts
IsValid()
{
//check validity of component and return true if valid else false
}
부모 구성 요소에는 '저장'이라는 버튼이 있습니다. 모든 하위 항목이 유효하면 해당 버튼을 활성화해야합니다. 그렇지 않으면 해당 버튼을 비활성화해야합니다.
따라서 부모에서 각 자식 구성 요소에 대해 자식 구성 요소 IsValid 함수를 호출 한 다음 유효성 결과를 확인하고 저장 버튼에 적용하여 활성화 또는 비활성화하는 방법이 필요합니다.
내가 시도한 것
1. 하위에서 상위로 유효하거나 잘못된 결과를 내보냈으며 하위 결과가 유효하지 않은 경우 저장 버튼을 비활성화했습니다.
그러나 여기에 문제는 : 하나의 자식을 추가하면 유효하게 만들면 저장 버튼이 활성화됩니다. 이제 유효하지 않은 다른 자식을 추가 했으므로 저장 버튼이 비활성화되지만 유효하지 않은 자식 저장 단추를 제거하면 유효한 자식이 하나만 있어도 비활성화됩니다. IsValid 이벤트는 현재 자식이 변경되는 경우에만 발생하기 때문입니다.
2. 나는 이것과 같은 것을 사용할 수 있습니다
<child #varName></child>
@ViewChild('varName') childElement;
그런 다음 부모로부터 전화 할 수 있습니다.
childElement.IsValid()
하지만 루프에서 어린이를 렌더링했기 때문에 루프에서 고유 한 이름을 지정하는 방법과 ts 파일의 고유 한 HTML 태그에 대한 참조를 추가하는 방법이 있습니다.
여기에 케이스를 만들었습니다 SlackBlitz
어떤 도움을 주시면 감사하겠습니다. 감사
@angular/core제공 ViewChildren하고 QueryList아마 도움이 될 것입니다.
<child #varName></child>
import { ViewChildren, QueryList } from '@angular/core';
@ViewChildren("varName") customComponentChildren: QueryList<YourComponent>;
this.customComponentChildren.forEach((child) => { let retult = child.IsValid(); })
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다