私はng-bootstrapをangular 4プロジェクトで使用しています:
<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>
Navbarがあり、応答性があり、正常に機能しているようです。しかし、navbar-togglerボタンは、折りたたまれてエラーが見つからない場合、navbarを切り替えません。
私は結局このようなことをしました:
Htmlテンプレートには、次のコードがあります。
<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>
コンポーネントにはこれがあります
export class NavComponent {
collapsed = true;
toggleCollapsed(): void {
this.collapsed = !this.collapsed;
}
}
コメントとjmiguel77のトップアンサーで言及されたものとして
Ng-bootstrap Githubドキュメントでこれを行う同様の方法も見つけたことを共有したいだけです https://ng-bootstrap.github.io/#/components/collapse/examples
代わりに[ngbCollapse] = "isCollapsed"を使用しました。どちらの方法でも、私が見たものと同じ結果になります。
ここに私のコードがあります:
//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() {
}
}
その非常にシンプルで非常に単純な、
C:\Niagara\Vega\ncPortal\.angular-cli.json
スクリプトの下で、この行を追加するか、node_modulesからbootstrap.jsファイルをポイントします。
"../node_modules/bootstrap/dist/js/bootstrap.js"
トグルだけでなく、他のすべてのアクションも期待どおりに動作するようになりました。
#you can use click method in your html and use router navigate in your type script.
#In HTML File
<a class="nav-link" (click)="onMenuClick('profile')">Profile </a>
#In Type Script file
onMenuClick(path) {
$('.navbar-toggler').click();
this.router.navigate(['/' + path]);
}