[英]Importing bootstrap 4 to Angular CLI app
我试图从使用Angular CLI创建的Angular 4应用程序的navbar组件内部使用bootstrap 4 collapse
方法。
问题如下。 我使用以下代码导入jquery和bootstrap:
import * as $ from 'jquery';
import 'bootstrap';
然后,当单击其中的链接时,使该事件处理程序折叠导航栏:
$('#navbarToggleArea .nav-link').on('click', function () {
$('#navbarToggleArea').collapse('hide');
});
使用ng serve
或ng build
命令成功编译了代码,但是在运行时失败,就像没有将bootstrap插件添加到jQuery一样。 调用collapse
函数时,将引发错误:
vendor.bundle.js:60854错误TypeError: WEBPACK_IMPORTED_MODULE_1_jquery (...)。崩溃不是一个函数
我的问题是:应配置什么以及如何消除该错误?
要实现折叠,请使用angular:
<div class="navbar-collapse collapse" [class.in]='collapsed'>
在“汉堡”上
<span [class.open]="collapsed" id="humburger" (click)="collapsed=!collapsed">
在课堂里:
collapse:boolean
;
实现此目的的角度方式在我的页面myPage中使用
引导导航栏
<nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation" (click)="isActive = !isActive">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown" [ngClass] = "{show : isActive}"> // ngClass used here
<ul class="navbar-nav">
<li class="nav-item dropdown [routerLinkActive]="['active']" appDropdown"> // directive used here
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<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>
</div>
</nav>
appDropdown指令
import {Directive, HostListener, HostBinding} from '@angular/core';
@Directive({
selector: '[appDropdown]'
})
export class DropdownDirective {
private isOpen:boolean = false;
@HostBinding('class.open') get opened(){
return this.isOpen;
}
constructor() { }
@HostListener('click')open(){
this.isOpen = true;
}
@HostListener('mouseleave')close(){
this.isOpen = false;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.