如何从Angular组件向外部JS文件传递值？

我来帮你搞定这个问题！你当前的困境是Angular模板里的data.title没办法直接通过原生onClick事件传递给外部JS函数，这是因为Angular的模板变量作用域和原生全局JS作用域是相互隔离的。下面给你两种可行的解决方案，优先推荐第一种更安全规范的方式：

方法一：通过Angular组件方法中转（推荐） #

这种方式遵循Angular的事件绑定规范，能避免作用域问题和潜在的安全风险，步骤如下：

1. 在组件类中封装调用外部函数的方法
   在app.component.ts里，先声明全局的openWin函数（避免TypeScript报错），然后创建一个组件内部方法来中转调用：

   // app.component.ts
   // 声明全局的openWin函数，告诉TS这个函数存在于全局作用域
   declare var openWin: (title?: string) => void;
   
   export class AppComponent {
     dataList = []; // 这里是你的数据列表，比如从接口获取的数组
   
     // 组件内部方法，负责接收模板传值并调用外部JS函数
     handleOpenWindow(title?: string) {
       openWin(title);
     }
   }
   

2. 修改模板使用Angular事件绑定
   将模板里的原生onClick替换成Angular的(click)事件绑定，直接传递模板变量：

   <table>
     <tr>
       <td>Time</td>
       <td>Title</td>
     </tr>
     <tr *ngFor="let data of dataList">
       <td>
         <a href="#" (click)="handleOpenWindow()">{{data.createDatetime}}</a>
       </td>
       <td>
         <a href="#" (click)="handleOpenWindow(data.title)">{{data.title}}</a>
       </td>
     </tr>
   </table>
   

方法二：直接用模板插值注入值（不推荐，有风险） #

如果你一定要用原生onClick，可以通过Angular的插值语法把模板变量值直接插入到函数参数里，但要注意安全风险：

<table>
  <tr>
    <td>Time</td>
    <td>Title</td>
  </tr>
  <tr *ngFor="let data of dataList">
    <td>
      <a href="#" onClick="openWin()">{{data.createDatetime}}</a>
    </td>
    <td>
      <!-- 用插值语法把data.title的值直接注入到函数调用中 -->
      <a href="#" onClick="openWin('{{data.title}}')">{{data.title}}</a>
    </td>
  </tr>
</table>

⚠️ 注意：这种方法存在两个问题：

• 如果data.title包含单引号、反斜杠等特殊字符，会直接导致JS语法错误；
• 如果data.title是用户输入的内容，可能会引入XSS攻击风险，所以只适合处理完全可控的静态数据。

额外提醒 #

确保你的script.js已经在index.html中正确加载，比如放在</body>标签之前，这样在组件渲染时openWin函数已经存在于全局作用域：

<!-- index.html -->
<body>
  <app-root></app-root>
  <script src="assets/script.js"></script>
</body>

内容的提问来源于stack exchange，提问作者Nguyenhuyen_AG