无法执行' setAttribute' on'元素':'(点击)'不是有效的属性名称

时间:2016-11-14 11:14:38

标签: jquery angular

我正在使用angular2打字稿。

在ngOnInit中我初始化一个jstree插件。

jQuery('#data').jstree({
    'core': {
        "check_callback": true,
        "themes": { "stripes": true },

        'data':  d

    }
})

此插件使用json字符串动态构建菜单树(li a)。

插件可以使用像这样的json将属性设置为锚点

 object= {
                text: dataObject.partner_company_name,
                icon: "",
                state: {
                    'opened': true,
                    selected: false
                },
                 id: dataObject.partner_company_name,
                children: [],
                a_attr:{"(click)":"redirectToComponent","userid":userid,'level':'2'}
            }

当用户点击锚时,他可以导航到用户ID和关卡上的其他组件。

显然我无法动态设置angular2点击,那么如何完成任务并将用户导航到另一个属性的正确组件?

这是我的组件

    import { Component } from '@angular/core';
    import {CookieService} from 'angular2-cookie/core';
    import {ViewEncapsulation} from '@angular/core';
    import { Observable }       from 'rxjs/Observable';
    import { MainService } from './main.service';
    import { Router } from '@angular/router';
    declare var jQuery:any;


    @Component({
      selector: 'ff-ff',
         templateUrl:'app/main/master.component.html',
           encapsulation: ViewEncapsulation.None,
             styleUrls: ['app/css/bootstrap-3.3.7-dist/css/bootstrap.min.css','app/main/master.component.css']
    })
    export class MasterComponent {
         constructor(private _cookieService:CookieService,private LogService:MainService,protected router: Router){}

         ngOnInit(): void {


    jQuery('#data').jstree({
        'core': {
            "check_callback": true,
            "themes": { "stripes": true },
            'data':  [
           {
                    text: 111,
                    icon: "",
                    state: {
                        'opened': true,
                        selected: false
                    },
                     id: dataObject.partner_company_name,
                    children: [],
                    a_attr:{"(click)":"redirectToComponent","userid":userid,'level':'2'}
                },
{
                    text: dataObject.partner_company_name,
                    icon: "",
                    state: {
                        'opened': true,
                        selected: false
                    },
                     id: 222,
                    children: [],
                    a_attr:{"(click)":"redirectToComponent","userid":userid,'level':'2'}
                }
                    ]
        }
    })
    }

结果是动态添加到命运的菜单

<div id="data"><li><a userid="3"  level=2></a>
<li><a userid="4"  level=2></a></div>

我需要将angular2事件监听器附加到锚点,以便在点击时将用户导航到正确的组件。

1 个答案:

答案 0 :(得分:2)

没有Angular2点击事件。 (click)只是Angular2语法,用于向DOM click事件添加事件处理程序。

无法动态添加Angular2值和事件绑定。它们仅在静态添加到组件模板时才起作用。

只需使用

$("someId").attr("click","event")