在按钮单击时动态打开具有不同内容的模态

Question

我正在尝试开发 angular2 应用程序。我在页面上的每个卡片页脚中有 9 个按钮。单击任何按钮或锚标记应打开引导模式，但每次单击都必须具有不同的内容。 modal 的模板必须相同，只是每个单击的按钮的内容都必须不同。现在，模式会在具有相同模板和内容的每个按钮上打开。如何将 ID 与按钮关联，以便单击导致相同的模态模板但不同的内容。

这是我在 sample.component.html 中的代码

           <div class="row">
     <div class="col-md-4">
            <div class="card">
                <div class="card-content">
                    <div class="card-header-orange">
                       <h1 class="card-heading">Card Header Blue</h1>
                    </div>
                    <div class="card-body">
                      <p class="card-p">
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
                            or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
                            isn't anything embarrassing hidden in the middle of text.

                        </p>
                    </div><br>
                    <div class="card-footer">
                  <button (click)="openModal(template)" class="btn btn-primary">Learn More</button>
                </div>

                </div>
            </div>
        </div>

    <div class="col-md-4">
            <div class="card">
                <div class="card-content">
                    <div class="card-header-orange">
                       <h1 class="card-heading">Card Header Blue</h1>
                    </div>
                    <div class="card-body">
                      <p class="card-p">
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour,
                            or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there
                            isn't anything embarrassing hidden in the middle of text.

                        </p>
                    </div><br>
                    <div class="card-footer">
                  <button (click)="openModal(template)" class="btn btn-primary">Learn More</button>
                </div>

                </div>
            </div>
        </div>


      <div class="col-md-4">
            <div class="card">
                <div class="card-content">
                    <div class="card-header-orange">
                       <h1 class="card-heading">Card Header Blue</h1>
                    </div>
                    <div class="card-body">
                      <p class="card-p">
                            There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour.    
                        </p>
                    </div><br>
                    <div class="card-footer">
                     <button (click)="openModal(template)" class="btn btn-primary">Learn More</button>
                    </div>

                </div>
            </div>
        </div>
</div>

这是我的模态模板：

      <ng-template #template>
     <div class="modal-header">
    <h4 class="modal-title pull-left">Modal</h4>
       <button type="button" class="close pull-right" aria-label="Close"   (click)="modalRef.hide()">
        <span aria-hidden="true">&times;</span>
    </button>
   </div>
 <div class="modal-body">
This is a modal.
 </div>

Answer 1

您可以尝试 ng-content 功能。您可以将其作为参考：- https://blog.angular-university.io/angular-ng-content/

如果您使用 ng-content 动态更改模态体的内容，那么您的模态将如下所示：-

modal.component.html :-

<div class="modal">
<div class="modal-dialog">
    <div class="modal-header">
        <span class="close-modal" (click)="closeModal()">x</span>
        <ng-content select="[modal-header]"></ng-content>
    </div>

    <div class="modal-content-container">
        <br>
        <br>
        <ng-content select="[modal-body]"></ng-content>
    </div>
</div>

<div class="overlay" (click)="closeModal()"></div>

对模态组件的调用应该是这样的：-

abc.component.html:-

<modal >
<div modal-header>
    <h3>Instance</h3>
</div>
<div modal-body>
    "Your Template"
</div>

这是一种方式，否则您也可以使用另一种方式，即动态组件加载器，这更像是一种专业的编码方式。你可以在这里查看参考：-https://angular.io/guide/dynamic-component-loader

使用组件加载器，我们可以根据选项将任意组件模板动态加载到modal中。

如果您选择使用组件加载器，那么您的模式会喜欢：-

<div class="modal">

<div class="modal-dialog" *ngIf="(selectors$ | async).state">

    <div class="modal-header">
         <span class="close-modal" (click)="closeModal()">x</span> 
    </div>

    <div class="modal-content-container">
         <ng-container component-loader [config]="selectors.component" [payload]="selectors.data"></ng-container>
    </div>
</div>

<div class="modal-overlay" (click)="closeModal()" *ngIf="(selectors$ | async).state"></div>

在这个组件加载器中是根据接收到的输入动态加载不同组件的指令。 modal.component.ts 文件如下：-

@组件({ 选择器：'模态'， templateUrl: './modal.component.html', })

导出类 ModalComponent{ @Input 选择器：可观察的； 构造函数（） }

选择器将是这样的对象：- 选择器 = { component: "要动态加载的组件名称", 数据：“作为输入传递给动态加载组件的任何数据” }