Question

我使用ngSemantic并且我不知道如何引用动态生成的ID。

我有几个带侧边栏的面板。要打开侧边栏，我需要声明

 (click)="sidebarId.show()"

我以这种方式设置侧边栏的ID：

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

我需要打电话给

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

但是由于我收到此错误，因此无法正常工作：

得到插值（{{}}），其中表达式位于第0列 PanelComponent @ 13:31中的[{{panelId}} - sidebar.show（）]

Answer 1

我还没有使用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

对于更复杂的情况，您可以使用@ViewChildren装饰器将id传递给自定义函数以获取相应的组件实例 https://angular.io/docs/ts/latest/api/core/index/ViewChildren-decorator.html

Answer 2

如果您的组件位于* ngFor循环中，则可以使用索引作为唯一ID。否则，您可以在实例化组件时初始化日期对象，并使用时间戳作为每个日期对象的唯一ID。

Answer 3

如果要创建动态名称，则使用括号表示法：

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

Answer 4

如何使用eval（）来评估表达式......

(click)="show(panelId)"


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

在Angular2模板中引用动态生成的id

4 个答案: