Angular 4 - 在 jquery append 中编译 [ngClass]

Posted

技术标签:

【中文标题】Angular 4 - 在 jquery append 中编译 [ngClass]【英文标题】:Angular 4 - Compile [ngClass] inside jquery append 【发布时间】:2018-01-05 00:14:52 【问题描述】:

我是 Angular 4 的新手,尝试使用 $().append() 方法动态附加 li 内容。我无法编译和使用 [ngClass] 指令

jQuery 将其视为字符串并附加到 DOM。我想编译它动态执行作为角度 4 指令。

下面是包含虚拟数据的数组!

    let listOfAllColumns = [
         name: "name", active: false ,
         name: "ConnectionType", active: true ,
         name: "Type", active: false ,
    ];

使用 jQuery 循环数组

      listOfAllColumns.forEach(item => 
        $(this.sortElement).append("<li><a href= 'javascript:;' [ngClass]=''activeTick': "+ item.active +"'>"+ item.name +"</a></li>");
    );

我的 DOM 内容:

<a href="javascript:;" [ngClass]="" activetick':="" false'="">name</a>

[ngClass] 被认为是一个字符串有没有办法在角度编译这个语句..!!!

提前致谢

【问题讨论】:

试试这样 [ngClass]="'activetick' : item.active " 我想从一个 ts 文件[组件文件]中加载它。符合我的情况。 【参考方案1】:

首先为什么要使用jQuery 渲染模板。您可以通过循环集合 listOfAllColumns 并渲染类似的模板 collection.length 次以 Angular 方式轻松完成

listOfAllColumns = [
     name: "name", active: false ,
     name: "ConnectionType", active: true ,
     name: "Type", active: false ,
];

HTML

<ul>
    <li *ngFor="let item in listOfAllColumns" 
       [ngClass]="'activeTick': item.active ">
        item.name
    </li>
<ul>

【讨论】:

我尝试使用 jquery 的原因是,我已将组件的元素引用共享给其他组件。试图从放置的其他组件加载元素 ref 的内容。内容将来自共享组件。或者有没有其他方法可以实现 tiz。 您可以使用shared-service 将数据共享给组件,并且基于相同的listOfAllColumns 列值将被填充,*ngFor 将在前端完成其工作

以上是关于Angular 4 - 在 jquery append 中编译 [ngClass]的主要内容,如果未能解决你的问题,请参考以下文章

Angular 4 - 在 jquery append 中编译 [ngClass]

常用CDN

一旦 HTML 在 Angular 4 中完全动态呈现,如何在 jQuery 中调用函数?

angular-directive - jQuery 点击事件不更新范围

未捕获的错误:Bootstrap 的 JavaScript 在 Angular 4 上需要 jQuery

在 Angular JS 中初始化 jQuery 插件(RoyalSlider)