正在绑定Angular中的jQuery参数

Question

请原谅我在这里缺乏经验。我是一名长期的面向对象开发人员，对Angular和jQuery都是新手。我正在使用Angular 8开发我的第一个单位置应用程序。它涉及到我在网上购买的第三方音频播放器，它使用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.

Answer 1

请尝试实现这个场景。

在模板更改中，此

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);
}
}