在 Angular 中以模态显示动态数据的问题答案

【问题标题】：Problem Displaying Dynamic Data in Modal in Angular在 Angular 中以模态显示动态数据的问题
【发布时间】：2019-08-04 21:42:34
【问题描述】：

我正在尝试将可重用模式从我的共享模块显示到另一个模块。我的问题是我正在尝试使数据动态化。我已经可以看到模态但没有显示动态数据。我正在尝试在 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>

可重用.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 { }

用户.html

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

【问题讨论】：

标签： angular angular6 angular-components ng-bootstrap angular4-forms

【解决方案1】：

你可以使用 Input 装饰器

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>

希望对你有帮助

【讨论】：