Приложение Angular 8 выдает ошибку времени выполнения в консоли, связанную с ng-bootstrap - PullRequest
Новая
       73

Приложение Angular 8 выдает ошибку времени выполнения в консоли, связанную с ng-bootstrap

0 голосов
/ 26 октября 2019

У меня есть приложение Angular 8, которое счастливо использует ng-bootstrap. После реализации ng-bootstrap в моем ленивом модуле приборной панели я столкнулся с проблемой, которая заключается в том, что я не могу использовать Dropdown Component.

Может ли кто-нибудь помочь мне выяснить, как эта проблема решится?

Повторное редактирование

Теперь у меня есть структура папок ниже:

enter image description here

и, следуя Этот пример. Я создал новую папку с именем 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 { }

dropdown-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>

dropdown-basic.ts: 

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

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

dropdown-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, загруженная успешно, но не показывающая ее содержимое.

enter image description here

Что я делаю неправильно, пожалуйста, дайте мне знать. (

1 Ответ

0 голосов
/ 26 октября 2019

Наконец-то достиг своей цели,

удалив: providers: [NgbdDropdownBasicModule ]

и добавив

declarations: [DashboardComponent] в мой dashboard.module.ts файл.

Цените время и усилия других разработчиков на моем посте.

...