Angular TemplateRef Issue

Question

Я должен поместить все ngx-bootstrap modals в один component.html, чтобы я мог получить доступ к любому модалу из любого места.

Я попробовал приведенный ниже код в

header.componentn.html
<button (click)="Login(loginModal)">Login</button>

header.cmponent.ts
@Input() myModal: AppModalsComponent;
bsModalRef: BsModalRef;
Login(template:TemplateRef<any>) {
    this.myModal.openModal(template);
}

app-modals.component.html
<ng-template #loginModal>
    <div class="modal-body">Login Here</div>
 </ng-template>

app-modals.component.ts
openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
}

Полный код на StackBlitz .

Я вставляю шаблон ссылки на объект из HTML. Это становится неопределенным в ts. Я думаю, что это потому, что соответствующий ng-шаблон отсутствует в том же HTML. Как восстановить это?

Answer 1

Согласно документации вы звоните show() по модальной услуге и

Передайте TemplateRef или компонент в качестве первого аргумента и настройте в качестве второго (необязательно).

Чтобы облегчить совместное использование этих модалов, я бы просто сделал каждый модал своим собственным компонентом. Вам нужно убедиться, что вы объявили его как entryComponent в app.module.

Затем, в каком бы компоненте не нужно было открывать модальный режим, вы можете просто добавить модальный сервис и затем передать компонент Modal, который вы хотите создать.

modal.component.ts

@Component({
  selector: 'app-modal',
  template: '<div class="modal-body">Login Here</div>'
})
export class ModalComponent {}

some.componet.ts

@Component({
  selector: 'app-some',
  template: '<button (click)="openModal">Open the modal</button>'
})
export class SomeComponent {
  constructor(public modalService: BsModalService) { }

  openModal() {
    this.modalService.show(ModalComponent);
  }
}

Stackblitz