Demo

Question

我希望传递在点击事件被触发时获得的变量元素＆＃39; a＆＃39;标记到以下组件＆＃39; clr-modal＆＃39;。我不能把它作为＆＃39; clr-modal＆＃39;的输入。组件，因为我无法编辑它。我需要一些黑客攻击，以便我可以自己执行html或者除了将它作为输入传递给嵌套组件之外的任何黑客。

我的代码：

`<div class="card-block">
             <ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list">
               <li>
                  <a (click)="opened=true; setval(element);">{{element.entry}}</a>
                  <clr-modal [(clrModalOpen)]="opened">
                   <h3 class="modal-title">{{element.entry}}</h3>
                    <div class="modal-body">
                    <p>Description :&emsp;{{element.entryDesc}}</p>
                    <br>
                   </div>
                   <div class="modal-footer">
                    <button (click)="moveInOn(element); opened=false;" type="submit" class="btn btn-sm" >Move to Ongoing</button>
                   <button (click)="moveInCo(element); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button>
                   </div>
                    </clr-modal>

               </li>
            </ul>

        </div>`

Answer 1

无需将元素传递给模态组件。由于clr-modal正在使用ng-content，因此您只能引用当前组件中存在的元素。您应该更新视图以仅定义模态一次，然后使用单个属性来保存当前打开的模态的数据，如下所示：

<div class="card-block">
    <ul *ngFor="let element of inprogArr; trackBy: elementFn" class="list">
        <li>
            <a (click)="opened=true; setval(element); modalElement = element">{{element.entry}}</a>
        </li>
    </ul>
    <clr-modal [(clrModalOpen)]="opened">
        <h3 class="modal-title">{{modalElement?.entry}}</h3>
            <div class="modal-body">
                <p>Description :&emsp;{{modalElement?.entryDesc}}</p>
                <br>
            </div>
            <div class="modal-footer">
                <button (click)="moveInOn(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Ongoing</button>
                <button (click)="moveInCo(modalElement); opened=false;" type="submit" class="btn btn-sm">Move to Completed</button>
            </div>
    </clr-modal>
</div>

在Angular 2

1 个答案:

Demo