Angular2 Component/Typescript를 사용하여 부트 스트랩 4 모달을 전환하는 방법

Question

Typescript를 사용하여 부트 스트랩 모달을 전환 할 수 없습니다. 기본 부트 스트랩 4 모달을 사용하고 있습니다. 여기에 코드가 있습니다. 여기

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

그리고

는 부트 스트랩 4는 모달

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> 
    Launch demo modal 
</button> 

내가 내 응용 프로그램에서이 버튼을 사용하고 있지 않다 전환 제공하는 버튼입니다. 내 Angular 2 구성 요소 중 하나에 함수를 통해 Modal을 표시하려고합니다. 다음 코드로 html 요소에 액세스했습니다.

ngOnInit() { 
    this.modalElement = document.getElementById('myModal'); 
    } 

이제 메소드 호출을 사용하여이를 표시하려면 모달을 활성화해야합니다. 나는 그것을 할 해결책을 찾지 못했습니다. .show() 및 다른 솔루션과 같은 메서드를 시도했지만 아무도 작동하지 않았습니다.

Answer 1

@ViewChild() 데코레이터를 사용하여 구성 요소의 모달을 가져온 다음 jQuery와 함께 사용하여 .modal() 메서드를 호출하여 함수 내에서 모델을 열 수 있습니다.

예 : #myModal에 대해 템플릿의 변수를 선언하십시오.

<div #myModal class="modal fade" id="myModal" tabindex="-1" role="dialog" 
    aria-labelledby="exampleModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 

@ViewChild() 데코레이터가있는 구성 요소에서 사용하십시오.

import { ViewChild } from '@angular/core'; 
import { ElementRef } from '@angular/core'; 
@Component({ 
    ... 
}) 
export class YourComponent { 
    @ViewChild('myModal') myModal:ElementRef; 

    yourFunction(){ 
    //open modal using jQuery 
    jQuery(this.myModal.nativeElement).modal('show'); 
    } 
} 

방금과 같은 구성 요소 파일에 jQuery 변수를 선언, 경우 here.

.modal() 방법을 사용) (.modal 말하는 오류 제공하는 경우는 함수가 아닙니다 프로젝트에 jQuery를 포함하는 단계를 찾을 수 있습니다

다음과 같습니다.

declare var jQuery:any; 

@Component({ 
... 
}) 
export class YourComponent{ 
... 
} 

Answer 2

앵귤러 2+에 대한 완벽한 부트 스트랩 4 통합을 제공하는 전용 라이브러리를 사용하는 것이 좋습니다.https://ng-bootstrap.github.io/#/components/modal을이 쿵하는 소리와 함께 라이브 예를 확인 :

@Component({ 
    selector: 'ngbd-modal-component', 
    templateUrl: './modal-component.html' 
}) 
export class NgbdModalComponent { 
    constructor(private modalService: NgbModal) {} 

    open() { 
    const modalRef = this.modalService.open(MyContent); 
    } 
} 

당신은 여기에 전체 문서를 읽을 수 있습니다 : http://plnkr.co/edit/vAsduJNgB0x6fWPQudQD?p=preview

Answer 3

3 단계 구성 요소의 내용과 모달을 열면 아래로 비등 곳 ng-bootstrap 우수한 모달 구현이

1. 가 전열에 ViewChild을 추가은 (표시 또는 숨기기) 부트 스트랩 모달를 전환합니다 코드를 다음과 같이 모달로 SS :

   팁 :

   <div class="modal fade" #modal> 
       <div class="modal-dialog"> 
        <div class="modal-content"> 
         <form> 
          <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
           <header class="font-12 bold">Modal Header</header> 
          </div> 
          <div class="modal-body"> 
           Your Content ... 
          </div> 
          <div class="modal-footer"> 
           <button type="submit" class="btn btn-primary">Save</button> 
           <button type="button" class="btn btn-danger" data-dismiss="modal">close</button> 
          </div> 
         </form> 
        </div> 
       </div> 
   </div> 
   

2. 이 당신의 HTML에서 모달을 표시하기위한 버튼 추가 : 첫 번째 줄의 코드에서 #modal고지 :

   팁 : (클릭) = "showModal()"에 대한 알림 :

   // jQuery Sign $ 
   declare let $: any; 
   
   @Component({ 
       ... 
   }) 
   export class YourComponent { 
       @ViewChild('modal') modal:ElementRef; 
   
       showModal(){ 
        // Show modal with jquery 
        $(this.modal.nativeElement).modal('show'); 
       } 
   } 
   

: 구성 요소 내부 JQuery와 기호 접근 showModal 기능 및 에 주목 :

팁 :

구성 요소 내부

<button type="button" class="btn btn-primary" (click)="showModal()">Show Modal</button> 

3. ,이 코드를 넣어