[英]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.