Показать несколько ng-modals с динамическим содержимым для соответствующих событий кликов в одном компоненте/странице, используя ‹ng-content›

Я использую модальные окна Angular2 для динамического создания контента с помощью <ng-content>. Позвольте мне объяснить вам, что я сделал.

Я создал модальный компонент с селектором «приложение-модальный», и его шаблон содержит <ng-content>, в котором я буду динамически загружать контент.

Теперь у меня есть еще один компонент, в котором мне нужно показывать определенные модальные окна при разных кликах с динамическим содержимым.

Итак, на моей странице было бы два «модальных приложения» с разным контентом.

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

В настоящее время, когда я нажимаю любую ссылку, она всегда открывает первое модальное окно на странице. Я знаю, что упускаю что-то или способ, которым мы можем ссылаться на соответствующие модальные окна, которые мы хотим показать.

Заранее спасибо.

Ниже приведен код в моем файле modal.component.ts.

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

    @ViewChild('content') modal: ElementRef;
    public modalClose: NgbActiveModal;
  constructor(public modalService: NgbModal) { }

    ngOnInit() {
    }
    open() {
    this.modalClose = this.modalService.open(this.modal, { windowClass: 'modal-wrapper' });
  }


  close(){
    this.modalClose.close();
  }
}

Код в modal.component.html

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Modal title</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <ng-content select=".modal-body"></ng-content>
    <ng-content select=".modal-footer"></ng-content>

</ng-template>

Ниже приведен код моего page.component.html, в котором я вызываю метод click для отображения соответствующих модальных окон.

<h3 (click)="openModalOne()">Open Modal One</h3>
<h3 (click)="openModalTwo()">Open Modal Two</h3>

    <app-modal>
        <div class="modal-body">
            Body of modal 1.
        </div>
        <div class="modal-footer">
            Footer of modal 1.
        </div>
    </app-modal>


    <app-modal>
        <div class="modal-body">
            Body of modal 2.
        </div>
        <div class="modal-footer">
            Footer of modal 2.
        </div>
    </app-modal>

Ниже приведен мой код page.component.ts.

import { AppModalComponent } from './app-modal/app-modal.component';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.css']
})
export class AppComponent {
  constructor (private modalService: NgbModal ) {}

  @ViewChild(AppModalComponent)
  private modal: AppModalComponent;

   openModalOne() {
    console.log("Inside open modal one");
    this.modal.open();
  }
  openModalTwo() {
    console.log("Inside open modal two");
    this.modal.open();
  }
}