Модальный не отображается правильно угловой 4

Я использую ng-bootstrap Здесь попробуйте сделать модальный пример, но когда я нажимаю на открытое модальное окно, оно не появляется, хотя оно существует внутри DOM. введите здесь описание изображения

моя основная версия angular: 4.0.0, @ng-bootstrap/ng-bootstrap: 1.0.0-alpha.29, bootstrap: 3.3.7

test-modal.component.html

<div class="modal-header">
      <h4 class="modal-title">Hi there!</h4>
      <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </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>

test-modal.component.ts

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

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

@Component({
  selector: 'app-test-modal',
  templateUrl: './test-modal.component.html',
  styleUrls: ['./test-modal.component.css']
})
export class TestModalComponent  {

@Input() name;

  constructor(public activeModal: NgbActiveModal) {}
}

открытая функция в app.component.ts с конструктором

 constructor(private modalService: NgbModal) {}
  open() {
    const modalRef = this.modalService.open(TestModalComponent);
  }

кнопка внутри app.component.html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

javascript angular ng-bootstrap
person abdoutelb    schedule 26.07.2017    source источник
comment
Опубликуйте фрагменты кода, которые вы используете, или предоставьте пример плунжера. Подробнее о том, как задать вопрос, можно прочитать здесь :)   -  person 0mpurdy    schedule 27.07.2017
comment
@0mpurdy Я поделился соответствующим кодом, смотрите обновления.   -  person abdoutelb    schedule 27.07.2017
comment
Этот вопрос может вам помочь. Обратите внимание, что в нем упоминается: вы забыли добавить bootstrap css в свое приложение?   -  person 0mpurdy    schedule 27.07.2017
comment
@0mpurdy, спасибо за ответ, я добавил загрузочный css в свой файл .angular-cli.json в разделе стилей.   -  person abdoutelb    schedule 27.07.2017
comment
Вы видите какие-либо ошибки в консоли?   -  person BrunoLM    schedule 27.07.2017
comment
@BrunoLM В консоли нет ошибок, она появляется в доме.   -  person abdoutelb    schedule 27.07.2017

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, что проблема может заключаться в вашей версии начальной загрузки bootstrap :3.3.7, когда я перехожу на домашнюю страницу, там написано, что она предназначена для Bootstrap 4 (также при начале работы указывается начальная загрузка 4).

И тестирование здесь, в проекте Angular 4 + Bootstrap 4, у меня все заработало.

пример

In package.json

"@ng-bootstrap/ng-bootstrap": "^1.0.0-alpha.29",
"bootstrap": "^4.0.0-alpha.6",

В моем модуле

imports: [
  NgbModule.forRoot(), ...
],
entryComponents: [ModalTemplateComponent],

В компоненте:

modal: NgbModalRef;

constructor(private modalService: NgbModal) { }  

async open() {
  this.modal = this.modalService.open(ModalTemplateComponent);

  const result = await this.modal.result;

  console.log(result);
}
person BrunoLM    schedule 27.07.2017
comment
ИДЕАЛЬНО это :D - person abdoutelb; 27.07.2017