ngx-modal - угловой 2

Question

Я пытаюсь реализовать модальную форму в моем угловом приложении. Мой код выглядит хорошо для меня, так как я не вижу ошибок. Я установил ngx-модал в свое приложение и также импортировал ModalModule в моем app.module.ts файл. Что может быть причиной того, что модальная форма не отвечает?

<button class="btn btn-success"  data-toggle="modal" data-target="#myModal">Open</button>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
</div>
      </div>
    </div>
  </div>
</div>

app.module.ts

import {ModalModule} from 'ngx-modal';

imports: [          
        ModalModule,
],

Answer 1

Вы должны открыть свой модальный с

<button (click)="myModal.open()">open my modal</button>
<modal #myModal>
    <modal-header>
        <h1>Modal header</h1>
    </modal-header>
    <modal-content>
        Hello Modal!
    </modal-content>
    <modal-footer>
      <button class="btn btn-primary" (click)="myModal.close()">&times;</button>
    </modal-footer>
</modal>

Answer 2

Следующие ваши ошибки

1. Вы пытаетесь использовать приведенную ниже строку, аналогичную традиционной модальной начальной загрузке, что неверно, так как обычная работа с jQuery и Bootstrap.js

   <button class="btn btn-success" data-toggle="modal" 
            data-target="#myModal">Open</button>
   

2. Вы используете id для определения имени для модального компонента, что также недопустимо в случае машинописного текста и angular2

   <div class="modal fade" id="myModal" role="dialog">
   

Решение: Замена строк в приведенном ниже коде будет работать, как ожидается, для ngx-modal.

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {ModalModule} from "ngx-modal";
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="row">
    <button (click)="myModal.open()">open my modal</button>
    <modal #myModal>
        <modal-header>
            <h1>Modal header</h1>
        </modal-header>
        <modal-content>
            Hello Modal!
        </modal-content>
        <modal-footer>
            <button class="btn btn-primary" (click)="myModal.close()">close</button>
        </modal-footer>
    </modal>
</div>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = 'Angular2'
  }
}

@NgModule({
  imports: [ BrowserModule,ModalModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

LIVE DEMO