В модальном окне Angular ng-bootstrap с шаблоном кнопки закрытия и закрытия не работают

Я новичок в angular и учусь на строительстве.

У меня есть требование программно открыть модальное окно с различным содержимым HTML.

Я привел первый проиллюстрированный пример stackblitz в этой проблеме и создал ModalComponent (с селектором <app-modal>), так что я могу создавать модальные окна где угодно в моем приложении.

Теперь я использую этот компонент с различным содержанием html в <ng-template> на моей странице.

Модальное окно открывается нормально при нажатии кнопки на главной странице, но кнопки закрытия и закрытия модального окна не работают.

Я попытался привести здесь минимальный пример: https://stackblitz.com/edit/angular-j1u4fo < / а>

Любая помощь будет оценена по достоинству. Спасибо.


typescript angular angular7 ng-bootstrap ng-template
person Sourav    schedule 01.05.2019    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Попробуй это

Я создал глобальную конфигурацию модальных окон с let-c = "close" и let-d = "dismiss"

app.component.html

<div class="container-fluid">
<p>Welcome to {{ name }}</p>
<button type="button" (click)="openModal()">Click to open Modal</button>

<!-- Example 1: Passing TemplateRef as custom component -->
  <ng-template #modal1 let-c="close" let-d="dismiss">
    <app-modal [title]="'Title'" [c]="c" [d]="d">
      <img src="https://angular.io/assets/images/logos/angular/angular.png" height="100px" width="100px">
    </app-modal>
  </ng-template>
</div>

modal.component.html

<div class="modal-header">
    <h4 class="modal-title">{{title}}</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <ng-content></ng-content>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary" (click)="c('Close click')">Cancel</button>
</div>

modal.component.ts

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

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


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

  @Input() title = `Information`;
  @Input() c;
  @Input() d;

  constructor(
    public activeModal: NgbActiveModal
  ) {}

  ngOnInit() {
  }

}
person Pawan Jangid    schedule 01.05.2019
comment
@Sourav: я создал глобальную конфигурацию с помощью let-c и let-d, вы можете проверить решение - person Pawan Jangid; 01.05.2019
comment
Для всех, кто интересуется, вот пример решения @Pawan: stackblitz.com/edit/angular-6xzhq8 - person Sourav; 01.05.2019

arrow_upward
0
arrow_downward

Замените this.m1 на ModalComponent в своем вызове openModal.

Согласно документации API, NgbActiveModal работает только при передаче компонент вместо шаблона.

Если вы передаете тип компонента в качестве содержимого, тогда экземпляры этих компонентов могут быть внедрены с экземпляром класса NgbActiveModal. Затем вы можете использовать методы NgbActiveModal, чтобы закрыть / отклонить модальные окна «изнутри» вашего компонента.

person Kylos    schedule 01.05.2019
comment
m1 - это шаблон, ModalComponent - это общий компонент, в теле которого есть ng-content для хранения этого шаблона. Мне нужно загрузить модальное окно с HTML-содержимым внутри шаблона. Следовательно, то, что вы предлагаете, не даст мне содержимого HTML. - person Sourav; 01.05.2019