在Angular2模板中引用動態生成的ID

我正在使用ngSemantic，我不知道如何引用動態生成的ID。在Angular2模板中引用動態生成的ID

我有幾個帶側邊欄的面板。要打開我需要聲明

(click)="sidebarId.show()"

我設置了側邊欄的ID這樣的側邊欄：

<sm-sidebar id="{{panelId}}-sidebar"></sm-sidebar>

我需要調用類似

(click)="{{panelId}}-sidebar.show()"

但這因爲我收到此錯誤不起作用：

Got interpolation ({{}}) where expression was expected at column 0 in [{{panelId}}-sidebar.show()] in [email protected]:31

來源

2017-03-21 Pennywise83

所以相應的組件實例，你有'{{panelId}} - 在你的組件中聲明sidebar'對象，以便您可以調用他們的'show'方法？ – dfsq

如果你的組件在* ngFor循環中，你可以使用索引作爲唯一的ID。否則，可以在實例化組件時初始化日期對象，並將時間戳用作每個日期對象的唯一ID。

來源

2017-03-21 14:53:18 birwin

是的，我已經添加了一個唯一的ID到我的元素，但我不知道我怎麼可以參考它裏面（點擊） – Pennywise83

呃......我誤解了這個問題。 – birwin

如果你想然後創建動態的名字，你會用括號標記：

(click)="this[panelId + '-sidebar'].show()"

來源

2017-03-21 14:59:35 dfsq

如何使用eval（）來計算表達式...

(click)="show(panelId)" 


function show(panelId) { 
    eval(panelId + '-sidebar.show()'); 
}

來源

2017-03-21 15:02:47 birwin

我還沒有使用ngSemantic。但是ID是不是一個實例，你不能使用id來調用任何方法相反，你應該使用＃獲取組件實例，從而可以撥打instance.method

<h4 class="ui header">Demo</h4> 
<sm-button class="positive icon" icon="sidebar" (click)="invertedSidebar.show({transition: 'overlay'})"> 
Lunch left sidebar</sm-button> 
<sm-sidebar class="left vertical inverted sidebar labeled icon menu" #invertedSidebar>   
    <a class="item"> 
     <i class="home icon"></i> 
     Home 
    </a> 
    <a class="item"> 
     <i class="block layout icon"></i> 
     Topics 
    </a> 
    <a class="item"> 
     <i class="smile icon"></i> 
     Friends 
    </a> 
</sm-sidebar>

https://github.com/vladotesanovic/ngSemantic/blob/456c4198860d2d3ce49e975753bd79fef6881fca/demo/app/components/elements/sidebar.ts

對於更復雜的情況下，可以通過ID，以自定義函數來獲取通過@ViewChildren裝飾 https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

來源

2017-03-21 15:03:54 Zealitude

謝謝。問題是我有多個側邊欄，所以我需要爲每個組件實例聲明一個動態ID。按照你的例子，我不能聲明#invertedSidebar，但我會聲明＃sidebar-timestamp，我不知道如何獲得它 – Pennywise83

點擊事件可以有一個$ event參數，它也將包含實例（點擊） =「openSiderbar（$ event）」。 Ref https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding – Zealitude

在Angular2模板中引用動態生成的ID

回答

相關問題