时间戳

首页 > 解决方案 > 从 Angular 绑定 jQuery 参数

angular - 从 Angular 绑定 jQuery 参数

问题描述

请原谅我在这里的经验不足。我是一名长期面向对象的开发人员，对 Angular 和 jQuery 都不熟悉。我正在使用 Angular 8 开发我的第一个单一位置应用程序。它涉及我在线购买的第 3 方音频播放器 - 它使用 jQuery 来触发歌曲选择等。当我对 jQuery 调用进行硬编码时，它可以完美运行。但我需要将发送到音频播放器的值绑定到我的数据集中的内容。在我的 NGX-DATATABLE 中考虑这个列：

              <ng-template let-column="column" ngx-datatable-header-template> Track Name </ng-template>
              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                <a href="javascript:void(0);" onclick="jQuery.audio7_html5.changeMp3('/assets/songs/feelit.m4a','The Song Name','The Song Author','/assets/audio/images/p3.jpg')">
                   {{ value }}
                </a>
              </ng-template>
            </ngx-datatable-column>

Works fine.  But I need something like this:

<ngx-datatable-column name="Title">
              <ng-template let-column="column" ngx-datatable-header-template> Track Name </ng-template>
              <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                <a href="javascript:void(0);" onclick="jQuery.audio7_html5.changeMp3('{{ row.songURL }}','{{ row.songTitle }}', '{{ row.songAuthor }}','{{ row.coverArtURL }}')">
                   {{ value }}
                </a>
              </ng-template>
            </ngx-datatable-column>

Is what I am trying to do possible?  Or is there a better way?  I'm very frustrated over here.  Thanks in advance for any advice or guidance you might be able to offer.

标签： angular

解决方案

请您尝试实施此方案。

在模板更改中，这

onclick="jQuery.audio7_html5.changeMp3('{{ row.songURL }}','{{ row.songTitle }}', '{{ row.songAuthor }}','{{ row.coverArtURL }}')"

对此

(click)="functionFromTsFile(row)"

在 ts 文件中 

declare var jQuery: any;   // <---- this line is very important

@Component({
  selector: 'app-some',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.scss'],
})
export class SomeComponent {
   // some code ......

   functionFromTsFile(row: {
      songURL: string;
      songTitle: string; 
      songAuthor: string; 
      coverArtURL: string
    }) {
       jQuery.audio7_html5.changeMp3(row.songURL, row.songTitle, row.songAuthor, row.coverArtURL);
   }

}

推荐阅读