Navbar BẬT không làm việc với góc 4/ng-bootstrap

Question

Tôi đang sử dụng ng-bootstrap trong tôi góc 4 dự án:

<navbar class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> 
    <button aria-controls="navbarsDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler navbar-toggler-right" data-target="#navbarsDefault" data-toggle="collapse" type="button"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <a class="navbar-brand" href="#">Navbar</a> 
    <div class="collapse navbar-collapse" id="navbarsDefault"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item"> 
       <a class="nav-link active" routerlink="/dashboard" routerlinkactive="active" ng-reflect-router-link="/dashboard" ng-reflect-router-link-active="active" href="/dashboard">Dashboard</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" routerlink="/program" routerlinkactive="active" ng-reflect-router-link="/program" ng-reflect-router-link-active="active" href="/program">Programm</a> 
      </li>   
     </ul> 
    </div> 
</navbar> 

Các thanh điều hướng là có, nó là phản ứng nhanh, có vẻ như để làm việc khỏe. Nhưng nút navbar-toggler không chuyển đổi thanh điều hướng, khi nó bị sập và tôi không thể tìm thấy lỗi.

Answer 1

tôi đã kết thúc làm một cái gì đó như thế này:

Trong template html i có mã này:

<nav id="mainNavbar" class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> 
     <a class="navbar-brand" href="#">Navbar</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" 
      data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
      aria-expanded="false" aria-label="Toggle navigation" 
      (click)="toggleCollapsed()"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <div id="navbarSupportedContent" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}"> 
      ...... 
     </div> 
</nav> 

Trong thành phần tôi có điều này

export class NavComponent { 
    collapsed = true; 
    toggleCollapsed(): void { 
     this.collapsed = !this.collapsed; 
    } 
} 

Answer 2

Như những gì đã được đề cập trong nhận xét và câu trả lời hàng đầu của jmiguel77

Chỉ muốn chia sẻ rằng tôi cũng tìm thấy cách tương tự để thực hiện việc này trên ng-bootstrap Github docs https://ng-bootstrap.github.io/#/components/collapse/examples

Tôi đã sử dụng [ngbCollapse] = "isCollapsed" thay thế. Cả hai cách đều có cùng kết quả từ những gì tôi thấy.

Đây là mã của tôi:

//app-navbar.component.html 


    <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> 
    <a class="navbar-brand" href="#">{{title}}</a> 
    <button class="navbar-toggler" type="button" (click)="toggleCollapsed()" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon" ngToggler></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarsExampleDefault" [ngbCollapse]="isCollapsed" > 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
     <li class="nav-item dropdown" ngbDropdown> 
     <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ngbDropdownToggle>Dropdown</a> 
     <div class="dropdown-menu" aria-labelledby="dropdown01" ngbDropdownMenu> 
      <a class="dropdown-item" href="#">Action</a> 
      <a class="dropdown-item" href="#">Another action</a> 
      <a class="dropdown-item" href="#">Something else here</a> 
     </div> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 

//app-navbar.component.ts 

import { Component, OnInit, Input } from '@angular/core'; 




@Component({ 
    selector: 'app-navbar', 
    templateUrl: './app-navbar.component.html', 
    styleUrls: ['./app-navbar.component.css'] 
}) 
export class AppNavbarComponent implements OnInit { 
    @Input() title: String; 
    isCollapsed = true; 
    toggleCollapsed(): void { 
    this.isCollapsed = !this.isCollapsed; 
    } 

    constructor() { } 



    ngOnInit() { 
    } 



} 

Answer 3

của nó rất đơn giản và khá thẳng về phía trước,

trong C:\Niagara\Vega\ncPortal\.angular-cli.json

dưới kịch bản, thêm dòng này, hoặc chỉ vào bootstrap.js tập tin từ bạn node_modules,

"../node_modules/bootstrap/dist/js/bootstrap.js" 

và xây dựng lại ứng dụng của bạn, bây giờ, không chỉ chuyển đổi, nhưng tất cả các hành động khác cũng sẽ hoạt động như mong đợi.