Question

我正在尝试开发angular2应用程序。我在页面上的每个页脚中都有9个按钮。单击任何按钮或锚标记应该打开引导程序的模式，但每次单击都必须具有不同的内容。模态的模板必须相同，除了每个单击的按钮的内容必须不同。现在，模式在每个按钮上打开，具有相同的模板和内容。如何将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

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

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

<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文件如下： -

@Component（{ 选择器：＆＃39;模态＆＃39;， templateUrl：＆＃39; ./ modal.component.html＆＃39;， }）

导出类ModalComponent { @Input选择器：Observable; 构造函数（） }

选择器将是这样的对象： - 选择器= { component：＆＃34;要动态加载的组件的名称＆＃34;， data：＆＃34;任何要作为输入传递给动态加载组件的数据＆＃34; }

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

1 个答案: