Referenz dynamisch generierte ID in Angular2 Vorlage

Ich benutze ngSemantic und ich weiß nicht, wie ich eine dynamisch generierte ID referenzieren kann.Referenz dynamisch generierte ID in Angular2 Vorlage

Ich habe mehrere Panels mit einer Sidebar. Um die Sidebar zu öffnen muss ich erklären

(click)="sidebarId.show()"

ich die ID der Sidebar auf diese Weise eingestellt:

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

ich brauchen würde, so etwas wie

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

zu nennen, aber diese funktioniert nicht, seit ich diesen Fehler erhalte:

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

Quelle

2017-03-21 Pennywise83

so Sie entsprechende Komponenteninstanz erhalten haben '{{panelId}} - sidebar' in Ihrer Komponente deklarierten Objekte, so dass Sie kann ihre 'show' Methode aufrufen ? – dfsq

Wenn sich Ihre Komponente in einer * ngFor-Schleife befindet, können Sie den Index als eindeutige ID verwenden. Andernfalls könnten Sie ein Datumsobjekt initialisieren, wenn die Komponente instanziiert wird, und den Zeitstempel als eindeutige ID für jedes Datumsobjekt verwenden.

Quelle

2017-03-21 14:53:18 birwin

Ja, ich füge bereits eine eindeutige ID zu meinem Element hinzu, aber ich weiß nicht, wie ich es innen verweisen kann (klick) – Pennywise83

Gotcha ... Ich habe die Frage missverstanden. – birwin

Wenn Sie dynamische Namen erstellen wollen, dann würden Sie Klammer-Notation:

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

Quelle

2017-03-21 14:59:35 dfsq

Wie wäre es mit eval(), um den Ausdruck auszuwerten ...

(click)="show(panelId)" 


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

Quelle

2017-03-21 15:02:47 birwin

Ich habe nicht verwenden ngSemantisch. Aber id ist kein Beispiel, Sie nicht id Anstatt jede Methode können Sie anrufen, sollten Sie # verwenden, um die Komponenteninstanz zu erhalten, so können Sie die instance.method nennen

<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

Für komplexere Fall können Sie die ID auf eine benutzerdefinierte Funktion übergeben, indem Sie @ViewChildren Dekorateur https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Quelle

2017-03-21 15:03:54 Zealitude

Vielen Dank. Das Problem ist, dass ich mehrere Sidebar habe, also muss ich eine dynamische ID für jede Komponenteninstanz deklarieren. Ihrem Beispiel folgend kann ich #invertedSidebar nicht deklarieren, aber ich würde # sidebar-timestamp deklarieren und ich weiß nicht, wie ich es erhalten kann – Pennywise83

Ein click-Ereignis kann einen $ event-Parameter haben, es enthält auch die Instanz (click) = "openSiderbar ($ event)". Ref https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding – Zealitude

Referenz dynamisch generierte ID in Angular2 Vorlage

Antwort

Verwandte Themen