ngbd-modal-component не является известным элементом - PullRequest
Новая
       5

ngbd-modal-component не является известным элементом

0 голосов
/ 07 января 2019

Я пытаюсь внедрить NgbModal в мой код, но продолжаю получать ту же ошибку: ngbd-modal-component не является известным элементом.

Возможно, это что-то глупое, что я забыл, но я ломаю голову над этим. Может ли кто-нибудь указать мне правильное направление?

Core.module 

import { NgModule, Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
import { NgbModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';

import { NavComponent } from './components/nav/nav.component';
import { SpinnerComponent } from './shared/components/spinner/spinner.component';
import { LoggerService } from './services/logger.service';
import { throwIfAlreadyLoaded } from './guards/module-import.guard';
import { NgbdModalComponent, NgbdModalContent } from './shared/components/config-modal/config-modal.components';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    NgSelectModule,
    NgbModalModule,
    NgbModule.forRoot()
  ],
  entryComponents: [NgbdModalContent],
  exports: [NavComponent, FormsModule],
  declarations: [NavComponent, SpinnerComponent, NgbdModalComponent, NgbdModalContent],
  providers: [LoggerService]
})
export class CoreModule {
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    throwIfAlreadyLoaded(parentModule, 'CoreModule');
  }
}

Компонент 

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

import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-content',
  template: `
    <div class="modal-header">
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
      <h4 class="modal-title">Hi there!</h4>
    </div>
    <div class="modal-body">
      <p>Hello, {{name}}!</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" (click)="activeModal.close('Close click')">Close</button>
    </div>
  `
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) { }
}

@Component({
  selector: 'ngbd-modal-component',
  templateUrl: 'src/lazy/modal-component.html'
})
export class NgbdModalComponent {
  constructor(private modalService: NgbModal) { }

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

1 Ответ

0 голосов
/ 07 января 2019

Добавьте его в свой экспорт в core.module: 

exports: [NavComponent, FormsModule, NgbModalModule],

EDIT

Извините, я не осознавал, что NgbdModalComponent был пользовательским компонентом. Попробуйте экспортировать его вместо модуля: 

exports: [NavComponent, FormsModule, NgbdModalComponent],
...