Проблема отображения динамических данных в модальном в угловом

Question

Я пытаюсь отобразить повторно используемый модал из моего общего модуля в другой модуль.Моя проблема в том, что я пытаюсь сделать данные динамическими.Я уже вижу модальные, но динамические данные не отображаются.Я пытаюсь отобразить его в user.html.В чем проблема с этим?См. Этот код ниже.

Многоразовый модальный HTML

<div class="modal-header">
  <h4 class="modal-title">
    <b>Edit User</b>
  </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">
  <div class="card-body">
    <div class="px-0">
      <div class="form-body">
        <ng-container *ngTemplateOutlet="modalFormTmpl"></ng-container>
      </div>
    </div>
  </div>
</div>
<div class="modal-footer">
  <ng-container *ngTemplateOutlet="modalButtonTmpl"></ng-container>
</div>

Reusable.ts

export class ReusableModalComponent implements OnInit {
  @ContentChild('modalForm') modalFormTmpl: TemplateRef<any>;
  @ContentChild('modalButton') modalButtonTmpl: TemplateRef<any>;

  constructor() { }

  ngOnInit() {
  }

}

Общий модуль

@NgModule({
      exports: [
        ReusableModalComponent,
        CommonModule,
      ],
      imports: [
        CommonModule
      ],
      declarations: [
        ReusableModalComponent
      ],
      entryComponents: [
        ReusableModalComponent
      ]
    })
    export class SharedModule { }

User.html

<app-reusable-modal>
  <ng-container #modalForm>
    <h1>jfpweoj</h1>
  </ng-container>
</app-reusable-modal>

Answer 1

Вы можете использовать декоратор ввода

import {Input} from '@angular/core';


export class ReusableModalComponent implements OnInit {
  @ContentChild('modalForm') modalFormTmpl: TemplateRef<any>;
  @ContentChild('modalButton') modalButtonTmpl: TemplateRef<any>;
  @Input() modalData: any; 

  constructor() { }

  ngOnInit() {
  }

}

, а затем в любое время, когда этот компонент объявлен, вы можете просто привязать к нему данные через свойство modalData через него, например,

<app-reusable-modal [modalData] = "yourData">
  <ng-container #modalForm>
    <h1>jfpweoj</h1>
  </ng-container>
</app-reusable-modal>

надеюсь, это поможет