[英]Importing bootstrap 4 to Angular CLI app
I'm trying to use bootstrap 4 collapse
method from inside the navbar component in my Angular 4 App created using Angular CLI. 我试图从使用Angular CLI创建的Angular 4应用程序的navbar组件内部使用bootstrap 4
collapse
方法。
The issue is as follows. 问题如下。 I import jquery and bootstrap using this code:
我使用以下代码导入jquery和bootstrap:
import * as $ from 'jquery';
import 'bootstrap';
And then have this event handler to collapse the navbar when link in it is clicked: 然后,当单击其中的链接时,使该事件处理程序折叠导航栏:
$('#navbarToggleArea .nav-link').on('click', function () {
$('#navbarToggleArea').collapse('hide');
});
Code is compiled successfully using ng serve
or ng build
commands, but fails at runtime, as if the bootstrap plugin was not added to jQuery. 使用
ng serve
或ng build
命令成功编译了代码,但是在运行时失败,就像没有将bootstrap插件添加到jQuery一样。 When collapse
function is being called the error is thrown: 调用
collapse
函数时,将引发错误:
vendor.bundle.js:60854 ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery (...).collapse is not a function
vendor.bundle.js:60854错误TypeError: WEBPACK_IMPORTED_MODULE_1_jquery (...)。崩溃不是一个函数
My question is: what and how should I configure to eliminate this error? 我的问题是:应配置什么以及如何消除该错误?
Code is here , and the component under question is here . 代码在这里 ,有问题的组件在这里 。
To achieve collapsing, use angular: 要实现折叠,请使用angular:
<div class="navbar-collapse collapse" [class.in]='collapsed'>
on the 'humburger' 在“汉堡”上
<span [class.open]="collapsed" id="humburger" (click)="collapsed=!collapsed">
in the class: 在课堂里:
collapse:boolean
; collapse:boolean
;
Angular way to achieve this used in my page myPage 实现此目的的角度方式在我的页面myPage中使用
Bootstrap Navbar 引导导航栏
<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 Directive 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.