각도 JS 2 - 부트 스트랩 navbar 드롭 다운이 작동하지 않음

Question

각도 2 (cli를 사용하여 만든 프로젝트)와 부트 스트랩이 설치되었습니다.

그런 다음 bootstrap CSS를 angular-cli.json에 추가하면 스타일링이 작동하지만 드롭 다운 메뉴가있는 navbar가 열리지 않을 때 스타일링이 작동합니다. 나는 bootstrap.js을 놓친 것이기 때문에 angular-cli.json의 스크립트 섹션에 jquery에 대해 불평했다고 덧붙였다 !! 그것을 추가했습니다.

시작되었지만 내가하고있는 일이 옳은지 잘 모르겠습니다.

참조 용 angular-cli.json을 붙여 넣습니다.

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.css" 
    ], 
    "scripts": ["./js/jquery.js",  "../node_modules/bootstrap/dist/js/bootstrap.js"], 

Answer 1

앵귤러 2와 부트 스트랩의 기본 통합을 제공하는 라이브러리를 사용하는 것이 좋습니다. https://ng-bootstrap.github.io 라이브러리는 우수한 API를 사용하며 사용하기 쉽습니다. 좋은 소식은 여기에 설명 된대로 드롭 다운을 지원한다는 것입니다. https://ng-bootstrap.github.io/#/components/dropdown

언급 된 라이브러리를 사용하면 jQuery 또는 부트 스트랩의 JS (CSS 만 필요함)를 설치할 필요가없고 드롭 다운은 사용하기 쉽습니다 (

<div ngbDropdown class="d-inline-block"> 
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> 
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <button class="dropdown-item">Action - 1</button> 
     <button class="dropdown-item">Another Action</button> 
     <button class="dropdown-item">Something else is here</button> 
    </div> 
</div> 

을 그리고 이봐, 당신도 살아있는 예를 들어이 : :)이 ngbDropdown 및 ngbDropdownToggle에게 지시를 통지 http://plnkr.co/edit/mSV1qxTwLgL55L1kWmd9?p=preview

Answer 2

네가 효과적 일 수 있습니다. 언젠가 각도가있는 Jquery를 사용하면 문제가 발생할 수 있습니다. bcz bootstrap.js는 내부 요소 인 dom 요소를 변경할 수 있기 때문에 경우에 따라 문제가 발생할 수 있습니다.

하지만모듈을 사용하는 것이 좋습니다. 그러면 angular2 방식으로 이미 작성된 액세스 부트 스트랩 구성 요소가 허용됩니다. 여기에서 Dropdown 구성 요소를 찾을 수도 있습니다.

Answer 3

내가 NG2 - 부트 스트랩 DOCUME 통해 갔다 국가. navbar가 아직 완성되지 않았습니까? 내가 그것을 볼 때 리팩터링 할 것인가?

그러나 jquery를 사용할 필요가없는 매우 간단한 자습서를 보았습니다. https://medium.com/@ct7/the-simple-way-to-make-a-mobile-angular-2-bootstrap-navbar-without-jquery-d6b3f67b037b

공지 저자는 미디어 쿼리에 대한 참조를

@media을두고 있음 (최소 폭 : 768px) {...} 이미 부트 스트랩 CSS 스타일 링크이있는 경우

필요가 없습니다.
내 네비게이션 바의 구성 요소에 가서 필요한 속성을 추가하고 핸들러 클릭

isIn = false; 

toggleState() { // click handler for navbar toggle 
    const bool = this.isIn; 
    this.isIn = bool === false ? true : false; 
} 

추가 된 네비게이션 바의 HTML 템플릿에 클릭 처리기

<button type="button" class="navbar-toggle" aria-expanded="false" aria-controls="navbar" (click)="toggleState()"> 

추가 내가 붕괴 싶어 사업부에 ngClass

<div id="navbar" class="navbar-collapse collapse" 
    [ngClass]="{'in':isIn}">