Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다

작은 쓰레기 같은 놈들 · 게시됨 2020. 6. 2. 오후 5:20:01

이전 섹션 리뷰

Angular 9 시리즈 (1) 동적 부하 구성 요소
https://www.itsvse.com/thread-9238-1-1.html

Angular 9 시리즈(2) 동적 성분 전송 매개변수
https://www.itsvse.com/thread-9245-1-1.html

Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다
https://www.itsvse.com/thread-9246-1-1.html

Angular 9 시리즈 (IV) 맞춤형 파이프 파이프라인
https://www.itsvse.com/thread-9248-1-1.html

Angular 9 시리즈(V)는 금액 통화 형식을 제공합니다
https://www.itsvse.com/thread-9249-1-1.html

이 글에서는 동적 컴포넌트에 이벤트를 구독하면 일반 컴포넌트가 ()로 바인딩될 수 있다는 것을 알지만, 동적으로 생성된 이벤트를 버인딩하면 어떻게 될까요? 그리고 컴포넌트가 전달하는 매개변수를 받아들입니다.

Modal1Component와 Modal2Component 컴포넌트는 메인 인터페이스에서 동적으로 생성하는 컴포넌트입니다.

Modal1Component 컴포넌트를 수정하여 입력 박스와 버튼을 추가합니다. 자식 컴포넌트 버튼을 클릭하면 값이 부모 컴포넌트로 전달되어 부모 컴포넌트의 인터페이스에 표시됩니다.

먼저 렌더링을 살펴보겠습니다.

Modal1 컴포넌트(동적으로 생성된 하위 컴포넌트) 관련 코드

modal1.component.html

로그인이 보이네요.

modal1.component.ts

로그인이 보이네요.

인덱스 컴포넌트(부모 컴포넌트) 관련 코드

index.component.html

로그인이 보이네요.

index.component.ts

로그인이 보이네요.

오류가 보고될 경우:

'ngModel'은 'input'의 알려진 속성이 아니기 때문에 바인딩할 수 없습니다.

용액:

app.module에 다음 코드를 추가하세요:

로그인이 보이네요.

이제 동적으로 생성된 컴포넌트에 대한 이벤트에 구독할 수 있습니다.

수신 하위 구성 요소의 값을 고려하지 않는다면, HostListener를 사용해 하위 구성 요소의 이벤트를 받고 버튼 버튼 이름에 따라 처리할 수도 있습니다.

다음 코드를 상위 컴포넌트 index.component.ts에 추가하세요:

로그인이 보이네요.

여기서 e는 $event.target을 의미하며, 이벤트 매개변수를 알 수 있다면 이 기사의 메시지에 답글을 달 수도 있습니다.

(끝)

[각] Angular 9 시리즈(3)는 동적 컴포넌트 이벤트를 구독합니다

관련 게시물

본 섹션