Как открыть ng-Bootstrap-Modal, который является дочерним компонентом?

Question

Я новичок в Angular и у меня есть некоторые сомнения по поводу Модалов с ng-Bootstrap .Я был в состоянии открыть модалы, которые находятся в одном и том же компоненте, и они прекрасно работают, например, этот:

Ссылка:

<a (click)="openAbout(contentAbout)" class="nav-link">About</a>

Событие клика:

  openAbout(contentAbout) {
    this.modalService.open(contentAbout, { centered: true, scrollable: true });
  }

Модальное:

<ng-template #contentAbout let-c="close" let-d="dismiss">
  <div class="modal-header">
      <h4 class="modal-title" id="modal-primary-title">About us</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 centered">
    <h2>Gravity Now!</h2>
    <p>It is a platform designed for Space Apps Challenge and the Challenge Gravity Map, Earth Watch category and was chosen in the Top 5 of The Most Inspiring Projects of 2014.</p>
    <a href="https://2014.spaceappschallenge.org/awards/#globalawards" target="_blank">
      <img id="spaceLogo" src="./assets/space_apps.png">
    </a>
    <br>
    <img id="supernovaLogo" src="./assets/supernova-logo.png">
    <p>Also, you can download our apps.</p>
    <div class="row">
      <div class="col">
        <a href="https://play.google.com/store/apps/details?id=tk.supernova.gnow" target="_blank">
          <img class="logo" src="./assets/android.png">
        </a>
      </div>
      <div class="col">
        <a href="https://www.microsoft.com/en-us/p/gravity-now/9nblgggzjlp5" target="_blank">
          <img class="logoWindows" src="./assets/windows.png">
        </a>
      </div>
    </div>
  </div>
</ng-template>

И это работает, однако, я хотел бы перенести этот модал на ребенкакомпонент, потому что у меня есть 4 модальных режима, и код выглядит как-то неорганизованно, но если я создаю новый дочерний компонент, переместите модальный код в дочерний, а затем добавлю его в родительский компонент следующим образом:

<app-about></app-about>

Ничего не происходит, так как щелчок ничего не открывает.У кого-нибудь есть опыт чего-то подобного?Знаете ли вы, что я должен изменить в событии щелчка?

Я прочитал даже документацию и не могу найти пример, связанный с моим:

https://ng -bootstrap.github.io / # / компоненты / модальные / примеры

Спасибо за любую идею.

Answer 1

Instead of calling child component in parent view you sould try this.
// if want to pass any value to child (parameter @Input() value in child);
// get back response from child (result @Output() EventEmitter value in child)
openChildComponentModel() {
        const modalRef = this.modalService.open(
            AboutComponent,
            {backdrop: 'static'}
        );
        modalRef.componentInstance.parameter= 'Text';
        modalRef.componentInstance.result.subscribe((response) => {}
        });
    }

Answer 2

Необходимо принять во внимание несколько изменений.

Первый шаг - зарегистрировать ваши модалы в разделе entryComponents вашего app.module.ts:

entryComponents: [
    AboutComponent,
],

Далеескопируйте ваш старый модал в ваш новый компонент и удалите эти 2 строки:

<ng-template #contentAbout let-c="close" let-d="dismiss">
</ng-template>

После этого в логике события click есть небольшое изменение в том, как его вызвать:

Это новый HTML-код:

<a class="nav-link" (click)="openAbout()">About</a>

Это новое событие TypeScript:

openAbout() {
    //Here you define the name of your component
    this.modalService.open(AboutComponent);
    //This section is if you want to have any variable to initialize
    //compConst.componentInstance.weight = undefined;
}

Кроме того, в новом компоненте необходимо добавить изменение constructor и добавитьэкземпляр NgbActiveModal.

constructor(public activeModal: NgbActiveModal) { }

Еще одно важное изменение в логике закрытия модального окна, его необходимо изменить на это:

<button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
    <span aria-hidden="true">&times;</span>
</button>

Вам необходимо изменитьold: (click)="d('Cross click')" to (click)="activeModal.dismiss('Cross click')"

И со всеми этими изменениями он будет работать как шарм.Я получил вдохновение здесь:

https://stackblitz.com/edit/angular-uwtgs6

Answer 3

Я не пробовал этого, но то, что вы можете сделать, это то, что вы можете передать событие от ребенка к родителю.Попробуйте найти источник событий в Angular docs.