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

您可以使用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>

希望这会有所帮助

在角度模态中显示动态数据时出现问题

1 个答案: