Angular 8 个应用程序在与 ng-bootstrap 相关的控制台中产生运行时错误

Question

我有一个 Angular 8 的应用程序，一直在愉快地使用 ng-bootstrap。在我的仪表板惰性模块中实施 ng-bootstrap 后，我遇到了无法使用 Dropdown 组件的问题。

谁能帮我看看这个问题是怎么解决的？

重新编辑

现在，我的文件夹结构如下：

并遵循 This 示例。我创建了一个名为 dropdown.

的新文件夹

这是我的 dashboard.component.html:

<div class="d-flex">
    <div class="p-2 flex-grow-1">
        <h4>
          Dashboard
          <span class="badge badge-light">Transactions</span>
        </h4>
    </div>
    <div class="p-2">
        <ngbd-dropdown-basic></ngbd-dropdown-basic>
    </div>
</div>

dashboard.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DashboardComponent } from './components/dashboard.component';
import { NgbdDropdownBasicModule } from '../dropdown/dropdown-basic.module';

const routes: Routes = [
    { path: '', component: DashboardComponent }
];


@NgModule({
    imports: [CommonModule, NgbdDropdownBasicModule,                                                                     RouterModule.forChild(routes)],
    exports: [RouterModule],
    providers: [NgbdDropdownBasicModule ]
})
export class DashboardModule { }

下拉列表-basic.html:

<div ngbDropdown class="dropdown">
  <button ngbDropdownToggle class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
  </button>
  <div ngbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

下拉列表-basic.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'ngbd-dropdown-basic',
    templateUrl: './dropdown-basic.html'
})
export class NgbdDropdownBasic {}

下拉菜单-basic.module.ts:

import { NgModule } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { NgbdDropdownBasic } from './dropdown-basic';


@NgModule({
    imports: [NgbModule],
    declarations: [NgbdDropdownBasic],
    exports: [NgbdDropdownBasic],
    bootstrap: [NgbdDropdownBasic]
})
export class NgbdDropdownBasicModule { }

现在，当前的问题是我的 ngbd-dropdown-basic 加载成功，但没有显示内容。

我做错了什么请告诉我。 :(

Answer 1

终于实现了我的目标

删除： providers: [NgbdDropdownBasicModule ]

并添加

declarations: [DashboardComponent] 在我的 dashboard.module.ts 文件中。

感谢其他开发人员在我的 post 上付出的时间和努力。

Angular 8 个应用程序在与 ng-bootstrap 相关的控制台中产生运行时错误

Angular 8 app produces runtime error in console related to ng-bootstrap

ng-bootstrap

angular

angular8