>

Angular 4 프로젝트 내에서 작동하도록 Bootstrap 4.0 모달 을 얻는 데 문제가 있습니다. .

모달은 간단한 정적 HTML 페이지에서 잘 작동합니다 : https://jsfiddle.net/Lq73nfkx/1/

<!-- MODAL -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" 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>

아래 화면 캡처에서 모달 표시를 누르면 html이 모델 HTML뿐만 아니라 문서의 <body> 와 같은 여러 위치에서 변경됩니다.  요소도 조작됩니다.

HTML 조작을 수행하는 Bootstrap JavaScript는 Angular 4 프로젝트에서 실행되지 않는 것으로 보입니다. 프로젝트 내에서 정확히 동일한 코드를 사용하면 HTML이 전혀 변경되지 않습니다.

Angular 4와 함께 Bootstrap을 사용해야하는 다른 방법이 있습니까? 아니면 부트 스트랩이 아닌 Angular 4와 함께 다른 모달 솔루션을 사용해야합니까?

  • 답변 # 1

    ngx-bootstrap 라이브러리를 사용하여이를 수행 할 수 있습니다. 라이브러리를 설치 한 후 다음 단계를 수행하십시오.

    1 단계 : app.module.ts 파일에 다음 코드를 추가하십시오.

    import { ModalModule, BsModalRef } from 'ngx-bootstrap';
    @NgModule({
     imports: [ModalModule.forRoot(),...],
     providers: [BsModalRef]
    })
    
    

    2 단계 : 다음 코드를 복사하여 app.commponent.html에 붙여 넣습니다.

       <button type="button" class="btn btn-primary" (click)="openModal(template)">Create template modal</button>
    <ng-template #template>
        <div class="modal-header">
            <h4 class="modal-title pull-left">Modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            This is a modal.
        </div>
    </ng-template>
    
    

    Step3 : 마지막으로 다음 코드를 app.component.ts에 복사합니다.

    import { Component, TemplateRef } from '@angular/core';
    import { BsModalService } from 'ngx-bootstrap/modal';
    import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
    export class AppComponent {
        modalRef: BsModalRef;
        constructor(private modalService: BsModalService) {}
        openModal(template: TemplateRef<any>) {
            this.modalRef = this.modalService.show(template,{ backdrop: 'static', keyboard: false });
        }
    }
    
    

  • 답변 # 2

    부트 스트랩 CDN을 가져 오는 동안 jQuery 후 TetherJS를 추가 할 수 있습니까?

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    
    

관련 자료

  • 이전 ios - 이미지가 멈추고 서비스를 채우기 위해 너무 오래 걸립니다
  • 다음 신속한 문자열 및 정수 배열