Angular 2의 모달 대화 상자 내부에 동적 구성 요소 로드

블로그

NGX 부트스트랩 라이브러리에서 모달 창을 사용하는 것은 매우 편리하고 사용하기 쉽습니다. 그러나 여러 번 사용할 수 있는 대규모 응용 프로그램에서 모달 창을 사용하면 많은 중복 코드를 작성할 수 있습니다.

시아 코인 구매 방법

문제

이 예에 대해 생각해 봅시다.

각 모달 창에는 상단에 닫기 버튼이 있고 하단에 제출 버튼이 필요합니다. 모달 창을 사용하는 모든 구성 요소에 대해 이러한 마크업을 작성하고 싶지는 않습니다. 우리는 이러한 요소와 모든 사용 사례에 대해 트리거할 수 있는 메서드를 재사용할 수 있기를 원합니다.

시작하기:

이 솔루션의 경우 다음에서 모달 창 라이브러리를 사용합니다.

https://valor-software.com/ngx-bootstrap

NGX 부트스트랩에서 모달 설치

ng add ngx-bootstrap --component modals

문서에 따르면 다음 예제와 같이 모달 내부 또는 구성 요소 내부에서 템플릿 참조를 열 수 있습니다.

demo.component.ts

@Component({ selector: 'app-demo', template: ` Open modal `, }) export class DemoComponent { bsModalRef: BsModalRef; constructor(private modalService: BsModalService) {} openModalWithComponent() { this.bsModalRef = this.modalService.show(ModalContentComponent); } close() { this.bsModalRef.hide(); } submit() { console.log('submit'); } }

#bootstrap-modal #dynamic-components #ngx-bootstrap #angular2 #typescript

미디엄닷컴

Angular 2의 모달 대화 상자 내부에 동적 구성 요소 로드

NGX 부트스트랩 라이브러리에서 모달 창을 사용하는 것은 매우 편리하고 사용하기 쉽습니다. 그러나 여러 번 사용할 수 있는 대규모 응용 프로그램에서 모달 창을 사용하면 많은 중복 코드를 작성할 수 있습니다.