ng-bootstrap 相关问题

下拉菜单的 dropright 变体在 ng-bootstrap 中不起作用

我正在尝试将 dropright 变体集成到引导下拉列表中。我可以在引导文档中看到它 https://getbootstrap.com/docs/4.3/components/dropdowns/#dropright 他们已经给出了代码 &...

带有 customTemplate 的 ng-bootstrap ngbDatepicker 不会自动关闭

我正在尝试将 ng-bootstrap ngbDatepicker 实现为弹出窗口，并带有用于选择月/年的自定义模板。 （我不关心一个月中的哪一天）。选择日期时，弹出窗口不...

在Angular v17中升级bootstrap和ng-bootstrap后编译问题

我已经在我的 Angular v17 项目中升级了我的 bootstrap 和 ng-bootstrap 。我已将 bootstrap 从 v4.5.3 升级到 v5.2.3，将 ng-bootstrap 从 v15.1.2 升级到 v16.0.0，但升级后我面临

从 NG 12 -> 16 升级并且“@ng-bootstrap/ng-bootstrap 获取：包“@ng-bootstrap/ng-bootstrap”具有不兼容的对等依赖项

从 12 -> 13（最终 13）时。每https://update.angular.io/?v=12.0-13.0 ng更新@angular/core@13 @angular/cli@13 出现依赖错误： 套餐“@ng-

导航栏切换不适用于 Angular 4 / ng-bootstrap

我在我的 Angular 4 项目中使用 ng-bootstrap： 我在我的Angular 4项目中使用ng-bootstrap： <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> 导航栏就在那里，它反应灵敏，看起来工作正常。但是当导航栏折叠时，导航栏切换按钮不会切换导航栏，并且我找不到错误。 我最终做了这样的事情： 在 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; } } 非常简单且直接， 在C:\Niagara\Vega\ncPortal\.angular-cli.json 在脚本下，添加此行，或指向 node_modules 中的 bootstrap.js 文件， "../node_modules/bootstrap/dist/js/bootstrap.js" 并重建您的应用程序，现在，不仅是切换，而且所有其他操作也将按预期工作。 正如评论中提到的以及 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() { } } #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]); } 在 script 标签下的 Angular.json 文件中添加“./node_modules/jquery/dist/jquery.js”，它将起作用。 我想我可以分享对我有用的东西。 我有一些您可以考虑的要求； 角8 引导程序4.5 ...在我的 html 模板中 [header.component.html] <nav id="mainNavbar" class="navbar navbar-expand-sm navbar-light bg-light"> <div class="container-fluid"> <a routerLink="/" class="navbar-brand">APP_NAME</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" (click)="collapsed = !this.collapsed" > <span class="navbar-toggler-icon"></span> </button> <div id="navbarSupportedContent" [ngClass]="{ collapse: collapsed, 'navbar-collapse': true }" > <!-- right nav menus --> <ul class="navbar-nav ml-auto"> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_1" class="nav-link"> lINK_1 </a> </li> <li routerLinkActive="active" class="nav-item"> <a routerLink="/LINK_2" class="nav-link"> LINK_2 </a> </li> </ul> </div> </div> </nav> ...在我的 ts 组件内 [header.component.ts] import { Component, OnInit} from "@angular/core"; @Component({ selector: "app-header", templateUrl: "./header.component.html", styleUrls: ["./header.component.css"], }) export class HeaderComponent implements OnInit { collapsed = true; constructor() {} ngOnInit() {} } 我希望这有帮助。感谢您的反馈和建议。 :) 我在 Angular 10、Bootstrap 4.5 上也遇到了同样的问题。 经过两天检查安装和提供所有必要依赖项的所有可能性后，我按照 Wyatt Lansdale 提供的链接中的说明进行操作（https://ng-bootstrap.github.io/#/components/collapse/examples）。 只要我有 Bootstrap 文档中的汉堡包图标 (< span class="navbar-toggler-icon" >< /span >)，仍然没有区别，但是一旦我将其更改为汉堡包图标的 unicode 字符（& # 9 7 7 6 ；没有空格）问题就解决了！最终有效:) 正如 Sanish Joseph 提到的，即使批准的响应有效（作为解决方法），正确的解决方案是使用 angular.json（或 angular-cli.json）以及包含 bootstrap.min.js 的脚本。 由于缺少引导脚本，因此需要检查该配置文件中是否也缺少引导 CSS： "styles": [ "src/styles.scss", "node_modules/bootstrap/dist/css/bootstrap.css" ], "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.min.js" ]

如何使用 Ng-Bootstrap Nav 将子组件作为选项卡？

我正在使用 Angular Bootstrap 中的导航组件，其使用方式如下（来自官方示例）： // 官方工作示例： 我正在使用 Angular Bootstrap 中的 Nav 组件，其使用方式如下（来自官方示例）： // Working Official Example: <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs"> <li [ngbNavItem]="1"> <a ngbNavLink>One</a> <ng-template ngbNavContent> <p>Content for One</p> </ng-template> </li> <li [ngbNavItem]="2"> <a ngbNavLink>Two</a> <ng-template ngbNavContent> <p>Content for Two</p> </ng-template> </li> // etc... </ul> <div [ngbNavOutlet]="nav" class="mt-2"></div> 但是同一个文件中包含大量内容会使其变得又长又混乱，因此我想将导航选项卡放在子组件中。我已经尝试过，但它不起作用： // What I want to achieve: <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs"> <tab-section-1></tab-section-1> <tab-section-2></tab-section-2> // etc... </ul> <div [ngbNavOutlet]="nav" class="mt-2"></div> 子组件： // tab-section-1 <li [ngbNavItem]="1"> <a ngbNavLink>One</a> <ng-template ngbNavContent> <p>Content for One</p> </ng-template> </li> 但它不起作用:( 在选项卡之间进行切换效果非常好，甚至选项卡标题也会显示出来。但是选项卡 content 没有渲染，很可能是因为它是 <ng-template> 并且由 ng-bootstrap 在另一个 div 中渲染。 我到处寻找，但一无所获！谢谢⭐ 结构略有不同，但您可以尝试为ng-template内部的内容创建组件。这样您就不会破坏导航功能，并且仍然拥有自己的组件： <ul ngbNav #nav="ngbNav" [(activeId)]="active" class="nav-tabs"> <li [ngbNavItem]="1"> <a ngbNavLink>One</a> <ng-template ngbNavContent> <tab-section-1></tab-section-1> </ng-template> </li> <li [ngbNavItem]="2"> <a ngbNavLink>Two</a> <ng-template ngbNavContent> <tab-section-2></tab-section-2> </ng-template> </li> </ul> 如果不在 root 上工作，请在该文件中导入 NgbNavModule

Angular 17.3.5：错误 NullInjectorError：R3InjectorError（AppModule）[NgbDropdown -> NgbDropdown]：NullInjectorError：没有 NgbDropdown 的提供者

当我使用角度15时，一切都很好。 当我将 Angular 升级到 17.3.5 和最新的 bootstrap 时，出现以下错误。请帮我！ 错误 NullInjectorError：R3InjectorError（AppModule）[

npm i bootstrap@next 是什么？

当我在 angularjs 2 中配置 bootstrap 时，我在此链接中遇到了以下步骤， 如何将 bootstrap 添加到 angular-cli 项目 npm 我 bootstrap@next 我明白如果...

ng-bootstrap 从 v15 升级到 v16 后，NgbAccordion 无法工作

在核心和cli升级之后，我正在将角度从v16升级到v17。我尝试将 ng-bootstrap 从 v15 升级到 v16，因为它与 Angular v17 兼容。但是升级 ng-boo 后...

Angular 17 - RangeError：getCompulatedStyle 超出最大调用堆栈大小

我正在使用 @ng-bootstrap/ng-bootstrap 16.0.0 开发一个 Angular 17 应用程序。 使用 ng 安装 @ng-bootstrap 及其依赖项（bootstrap 5.3.2、@popperjs/core 2.11.8）后添加 @ng-bootstrap/ng-

NgbModal 来自 ng-bootstrap 冻结并且无法在 ng-bootstrap 版本 15 和 Angular 版本 16 中工作

我正在将我的 Angular 应用程序从 v15 升级到 v16，根据文档，我将 @ng-bootstrap/ng-bootstrap 包更新到 v15。因此，所有 NgbModals 都无法正常工作......

Angular 17 和 ng-bootstrap、ngb-分页问题

我正在使用 Angular 版本 17 开发 Angular 项目，并且正在使用 ngb-pagination。然而，ngb-pagination 导致了一些错误。 ng-bootstrap 提供的示例适用于独立的

如何更改 Bootstrap 卡头的背景颜色？

我正在尝试更改引导卡标题的背景颜色，但是当我添加背景颜色：#00AA9E 时，它似乎以某种方式破坏了标题的外观..？有谁以前见过这个吗...

如何避免 ng-bootstrap ngbModal 组件内的键绑定传播？

为了使页面符合 ADA，我们需要能够通过在“OPEN”按钮上单击/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 为了保持页面符合 ADA，我们需要能够通过单击“打开”按钮上的/空格/输入来打开 ng-bootstrap (ngbModal) 模式弹出窗口。 <div (keyup.enter)="openModal($event)" (keyup.space)="openModal($event) (click)="openModal($event)">Open Modal</div> 模态页面内： <button>Close</button> 按关闭按钮上的 Enter 键将关闭模态框，返回到调用的 div 元素并重新执行 ENTER 键并再次重新打开模态框。我在 openModal 函数内和模态本身内尝试了 stoppropagation、return false、cancelbubble，但均无济于事，绑定的 ENTER 键不断在两个页面上/下冒泡。 我能够通过模态中的以下实现来解决它： @HostListener("document:keydown", ["$event"]) onKeydownHandler( event: KeyboardEvent ) { if(event.key === "Enter"){ event.preventDefault(); event.stopImmediatePropagation(); } } 为“document:keydown”添加 PreventDefault() 或 stopImmediatePropagation() 将会影响页面的其他正常功能。 相反，只需添加 setTimeout() 并设置 200ms 的计时器即可。

ngx-datepicker 标头为空

我正在尝试使用 ngx-datepicker 但无论我做什么都会使标题（datepicker 导航部分）为空。 预期结果： https://i.stack.imgur.com/4dBOO.png 当前结果： https://i.stack...

如何更改ngbTooltip的默认颜色？

这是我使用ngbTooltip的地方。如何更改文本和背景的颜色。 这是我使用ngbTooltip的地方。如何更改其文本和背景的颜色。 <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal3" placement="end" ngbTooltip="Will wait for action on file">Wait for a file</a></li> 您可以通过向工具提示添加类来应用自定义 css。 <a ngbTooltip="Will wait for action on file" tooltipClass="my-custom-class">Wait for a file</a></li> 在你的 CSS 中： .my-custom-class .tooltip-inner { background-color: your-background-color-here; color: your-text-color-here; } .my-custom-class.bs-tooltip-top .tooltip-arrow::before { border-top-color: your-background-color-here; } 在 html 中添加一个类 <a class="dropdown-item" data-bs-toggle="modal" data-bs-target="#modal3" placement="end" [ngbTooltip]="Will wait for action on file" [tooltipClass]="mytooltip">Wait for a file</a></li> 在你的component.css中 :host ::ng-deep mytooltip { //whatever you want } 花了一些时间使用 ngbtooltip 之后，我修复了 ngbtooltip 箭头背景颜色 .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before { border-top-color: #0062A2 !important; }

ngbTooltip - 在延迟期间取消工具提示外观

我在应用程序中的许多元素上使用 ngbTooltip。 每个工具提示直接在 HTML 代码中初始化如下 我在应用程序中的许多元素上使用 ngbTooltip。 每个工具提示直接在 HTML 代码中初始化如下 <div ngbTooltip="my tooltip" container="body" placement="left" openDelay="1000" triggers="hover" (click)="doSomething()" > click me ! </div> 一切正常，除非用户在指定的延迟过去之前单击 HTML 元素。 在这种情况下，GUI 被部分修改，用于触发工具提示的元素不再显示，但延迟后，工具提示仍然显示在屏幕左上角。 单击按钮或不再显示触发元素时如何取消工具提示的出现？ 我的版本是： ng-bootstrap：16.0.0 和角度：17.1.0 在尝试了几乎所有方法之后，我使用 ngx-bootstrap 工具提示遇到了这个示例，它通过使用此属性解释并简单地解决了我的问题： triggers="mouseenter:click mouseenter:mouseleave" 我尝试用 ng-bootstrap 复制它，但失败了。 所以我决定替换所有工具提示并使用 ngx-bootstrap 代替。

错误：“ngb-tab”不是已知元素。角度 11

我正在将应用程序升级到 Angular 11，并面临引导选项卡的问题 错误：“ngb-tab”不是已知元素： 如果“ngb-tab”是 Angular 组件，则验证它是否是此模块的一部分...

ng-bootstrap 滚动间谍在没有高度的情况下无法工作？

我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。 我的代码如下： 我在我的项目中使用 ng-bootstrap [ngbScrollSpy] 指令，如文档中所述，但它不起作用 - 滚动时活动项目不会改变。 我的代码如下： <div> <div class="sticky-top"> <ul class="nav menu-sidebar"> <li > <a [ngbScrollSpyItem]="[spy, 'about']">About</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="schedule">Schedule</a> </li> <li > <a [ngbScrollSpyItem]="spy" fragment="hotel">Information about the hotel</a> </li> </ul> </div> <div ngbScrollSpy #spy="ngbScrollSpy" > <section ngbScrollSpyFragment="about"> <h3>About</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="schedule"> <h3>Schedule</h3> <p>{{some long long text and content}}</p> </section> <section ngbScrollSpyFragment="hotel"> <h3>Information about the hotel</h3> <p>{{some long long text and content}}</p> </section> </div> </div> 我在这个 stackoverflow 问题中看到，我的问题是我没有向我的 div 提供 height，这是事实。 但我的滚动间谍部分遍布整个页面，而不是一个小 div，（导航本身是 sticky-top）。所以我不能给它高度。 我知道有替代方法 - 刷新窗口滚动上的滚动间谍，但我没有找到可以帮助我的正确代码。 你能解决我的问题吗？ 为我提供刷新滚动间谍的代码/给我有关高度的提示/帮助我找到另一个相应的元素。 非常感谢！ 附上 stackblitz 演示的链接 注意：我使用来自 @ng-bootstrap/ng-bootstrap 的 NgbScrollSpy （我想它是非常相似的库） 我做什么： 我将所有内容（包括导航）包装在中 <div class="wrapper" ngbScrollSpy #spy="ngbScrollSpy" rootMargin="2px" [threshold]="1.0" > <div class="sticky-top pt-4 pb-4 bg-white"> ..here the navigation... </div> ..here the sections... <section ngbScrollSpyFragment="about"> </section> //the last I use margin-bottom:2rem; <section ngbScrollSpyFragment="hotel" style="margin-bottom:10rem" </section> </div> 见“门槛”。这表明“更改”活动片段应该可见的百分比（1 是 100%） 包装类 .wrapper{ height:100%; position: absolute; top:0; } 我使用强制链接的类别 //remove all the class for the link a{ color:black; text-decoration:none; padding:8px 16px; } a.custom-active{ color:white; background-color:royalblue } 以及我使用的每个链接 <a [class.custom-active]="spy.active=='about'">About</a> 嗯，问题是如何“滚动到”。 “链接”应该作为链接使用。 第一个是指示“路由器”应该考虑“碎片” 如果我们的组件是独立组件，我们需要使用提供者，provideRouter bootstrapApplication(App, { providers: [ provideRouter([], withInMemoryScrolling({anchorScrolling:'enabled'})), ] }) 然后，我们需要考虑到我们的页面确实没有滚动，div“包装器”是谁拥有滚动。因此，我们订阅 router.events，当事件有“锚点”时，我们滚动“包装器”div constructor(router: Router) { router.events.pipe(filter((e:any) => e.anchor)).subscribe((e: any) => { (document.getElementById('wrapper') as any).scrollTop+= (document.getElementById(e.anchor)?.getBoundingClientRect().top||0) -72; //<--this is the offset }); } 在这个stactblitz中你有一个有效的例子

可访问性引导模态角度

我正在使用 Lighthouse 来检查我的应用程序的可访问性。 我正在尝试使引导程序模式可访问。 组件的代码： 构造函数（私有 modalService：NgbModal）{} 让 m = this.modalService.o...