[英]Passing variables between components without using @Input decorator in Angular 2
我想将单击事件在'a'标签中触发时获得的变量元素传递给以下组件'clr-modal'。 我无法将其作为“ clr-modal”组件的输入,因为我无法对其进行编辑。 我需要一些技巧,以便除了将其作为输入传递到嵌套组件之外,我还可以自己执行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 : {{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>`
无需将元素传递给模态组件。 由于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 : {{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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.