折叠在导航栏面包屑按钮的 ng-bootstrap 和 angular 4 应用程序中不起作用
Collapse not working in ng-bootstrap and angular 4 app for navbar breadcrumb button
我正在为我的应用程序使用 angular 4 和 bootstrap 4 beta 2 和 ng-bootstrap 并且还使用 ng-bootstrap.
我添加了 bootstrap 文档示例中的导航栏。
代码如下所示:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
我还在 angular-cli.json 中添加了 bootstrap 样式。该代码如下所示:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
移动视图上的“面包屑导航”按钮在点击时没有响应。当我试图检查相同的内容时:我知道 "collapsed" class 没有被添加到点击按钮。
我现在有办法了。只需使用 ng-bootstrap 即可解决您的问题。
Html 文件:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
组件 ts 文件:
export class AppComponent {
isCollapsed = false;
}
在angular-cli.json中添加bootstrapcss文件:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
在主模块中添加:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
imports: [
NgbModule.forRoot()
]
这会很有效。
使用 ng-bootstrap 的主要优点是你可以消除其他 js 库的依赖,如 jquery 和 popper,你也可以为 bootstrap 编写组件。
使用 ng-bootstrap(或者在我的例子中是 ngx-boostrap)绝对简化了事情,因为我不必担心 jQuery 和 popper。正如目前接受的答案提到的那样。
但是这并没有彻底解决我的问题,因为我错过了重要的细节。在你有 ngx-bootstrap 和 运行 之后,你可以通过将 navbar-collapse
div 的 collapse
属性 绑定到一个变量开始您的组件文件:
<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
...
</div>
仅此还不够,您实际上需要通过绑定到切换器按钮的点击事件来自己修改此变量(这是我遗漏的部分):
<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
(click)="isCollapsed = !isCollapsed"
是我最基本的缺失部分。这会将按钮的 onClick 事件绑定到您的 isCollapsed 变量,在单击时切换它,从而适当地设置导航栏的 collapse
属性。
这是我发现的 jsfiddle,它最终帮助我找出了我的错误:
jsFiddle external link
工作导航栏
ng-bootstrap
入门
组件
{{ 零件 }}
<span class="github-buttons d-none d-lg-inline">
<a class="github-button"
href="https://github.com/ng-bootstrap/ng-bootstrap"
target="_blank"
data-style="mega"
data-count-href="/ng-bootstrap/ng-bootstrap/stargazers"
data-count-api="/repos/ng-bootstrap/ng-bootstrap#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star ng-bootstrap/ng-bootstrap on GitHub">Star</a>
<a href="https://twitter.com/intent/tweet?button_hashtag=ngbootstrap"
class="twitter-hashtag-button"
data-size="large"
data-text="I'm checking out ng-bootstrap, THE Angular UI framework for Bootstrap CSS"
data-url="https://ng-bootstrap.github.io"
data-show-count="true">Tweet #ngbootstrap</a>
</span>
我已使用以下解决方案修复
component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow bg-body rounded">
<div class="container-fluid">
<a class="navbar-brand" href="/">{{ applicationName }}</a>
<button #collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation" (click)="togglePanel(collapseButton,collapsePanel)">
<span class="navbar-toggler-icon"></span>
</button>
<div #collapsePanel class="collapse navbar-collapse" id="navbarTogglerDemo02">
<div class="navbar-nav me-auto mb-2 mb-lg-0"></div>
<ul class="navbar-nav me-2">
<li class="nav-item" *ngFor="let navItem of navMenuList">
<a class="nav-link" [routerLink]="navItem.path">
<mat-icon>{{navItem.icon}}</mat-icon> {{navItem.name}}
</a>
</li>
</ul>
</div>
</div>
component.ts
togglePanel(collapseButton: HTMLElement, collapsePanel: HTMLElement) {
if (this.isCollapsed) {
collapseButton.classList.add('collapsed');
collapsePanel.classList.remove('show');
} else {
collapsePanel.classList.add('show');
collapseButton.classList.remove('collapsed');
}
this.isCollapsed = !this.isCollapsed
}
Javascript 文件未加载。在您的 HTML 代码中的某处添加以下内容(最好在 header 中):
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
有关详细信息,请参阅 https://getbootstrap.com/docs/5.1/getting-started/introduction/#js and https://getbootstrap.com/docs/5.1/getting-started/javascript/。
我正在为我的应用程序使用 angular 4 和 bootstrap 4 beta 2 和 ng-bootstrap 并且还使用 ng-bootstrap.
我添加了 bootstrap 文档示例中的导航栏。
代码如下所示:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
我还在 angular-cli.json 中添加了 bootstrap 样式。该代码如下所示:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
移动视图上的“面包屑导航”按钮在点击时没有响应。当我试图检查相同的内容时:我知道 "collapsed" class 没有被添加到点击按钮。
我现在有办法了。只需使用 ng-bootstrap 即可解决您的问题。
Html 文件:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler btn btn-outline-primary" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" aria-controls="navbarTogglerDemo02">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02" [ngbCollapse]="isCollapsed">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<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>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
组件 ts 文件:
export class AppComponent {
isCollapsed = false;
}
在angular-cli.json中添加bootstrapcss文件:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
在主模块中添加:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
imports: [
NgbModule.forRoot()
]
这会很有效。
使用 ng-bootstrap 的主要优点是你可以消除其他 js 库的依赖,如 jquery 和 popper,你也可以为 bootstrap 编写组件。
使用 ng-bootstrap(或者在我的例子中是 ngx-boostrap)绝对简化了事情,因为我不必担心 jQuery 和 popper。正如目前接受的答案提到的那样。
但是这并没有彻底解决我的问题,因为我错过了重要的细节。在你有 ngx-bootstrap 和 运行 之后,你可以通过将 navbar-collapse
div 的 collapse
属性 绑定到一个变量开始您的组件文件:
<div [collapse]="isCollapsed" class="navbar-collapse collapse" id="navbar-main">
...
</div>
仅此还不够,您实际上需要通过绑定到切换器按钮的点击事件来自己修改此变量(这是我遗漏的部分):
<button (click)="isCollapsed = !isCollapsed" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
(click)="isCollapsed = !isCollapsed"
是我最基本的缺失部分。这会将按钮的 onClick 事件绑定到您的 isCollapsed 变量,在单击时切换它,从而适当地设置导航栏的 collapse
属性。
这是我发现的 jsfiddle,它最终帮助我找出了我的错误: jsFiddle external link
工作导航栏
ng-bootstrap
入门 组件 {{ 零件 }}
<span class="github-buttons d-none d-lg-inline">
<a class="github-button"
href="https://github.com/ng-bootstrap/ng-bootstrap"
target="_blank"
data-style="mega"
data-count-href="/ng-bootstrap/ng-bootstrap/stargazers"
data-count-api="/repos/ng-bootstrap/ng-bootstrap#stargazers_count"
data-count-aria-label="# stargazers on GitHub"
aria-label="Star ng-bootstrap/ng-bootstrap on GitHub">Star</a>
<a href="https://twitter.com/intent/tweet?button_hashtag=ngbootstrap"
class="twitter-hashtag-button"
data-size="large"
data-text="I'm checking out ng-bootstrap, THE Angular UI framework for Bootstrap CSS"
data-url="https://ng-bootstrap.github.io"
data-show-count="true">Tweet #ngbootstrap</a>
</span>
我已使用以下解决方案修复
component.html
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow bg-body rounded">
<div class="container-fluid">
<a class="navbar-brand" href="/">{{ applicationName }}</a>
<button #collapseButton class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation" (click)="togglePanel(collapseButton,collapsePanel)">
<span class="navbar-toggler-icon"></span>
</button>
<div #collapsePanel class="collapse navbar-collapse" id="navbarTogglerDemo02">
<div class="navbar-nav me-auto mb-2 mb-lg-0"></div>
<ul class="navbar-nav me-2">
<li class="nav-item" *ngFor="let navItem of navMenuList">
<a class="nav-link" [routerLink]="navItem.path">
<mat-icon>{{navItem.icon}}</mat-icon> {{navItem.name}}
</a>
</li>
</ul>
</div>
</div>
component.ts
togglePanel(collapseButton: HTMLElement, collapsePanel: HTMLElement) {
if (this.isCollapsed) {
collapseButton.classList.add('collapsed');
collapsePanel.classList.remove('show');
} else {
collapsePanel.classList.add('show');
collapseButton.classList.remove('collapsed');
}
this.isCollapsed = !this.isCollapsed
}
Javascript 文件未加载。在您的 HTML 代码中的某处添加以下内容(最好在 header 中):
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
有关详细信息,请参阅 https://getbootstrap.com/docs/5.1/getting-started/introduction/#js and https://getbootstrap.com/docs/5.1/getting-started/javascript/。