如何通过jQuery.trigger跨页面触发Angular按钮时正确传递参数

问题根源

• 你当前模板(click)="showsubtreeAlert(alertMessage)"中，传递的是Angular组件内部的alertMessage变量，初始状态为空，自然不会拿到外部传入的参数
• Angular的原生事件绑定逻辑，不会处理jQuery trigger方法传递的额外自定义参数，所以就算改传$event也没法直接拿到你传的activeMessage

解决步骤

1. 移除按钮上的(click)绑定，避免重复触发事件，修改后的HTML代码：

<button id="subtreeAlert"></button>

2. 在Angular组件的ngAfterViewInit生命周期钩子中，用jQuery绑定点击事件，直接接收jQuery传递的参数，修改TS代码：

import { Component, ChangeDetectorRef, AfterViewInit } from '@angular/core';
// 其他导入逻辑...

declare var $: any; // 引入jQuery声明，避免TS报错

@Component({
  // 你的原有组件配置
})
export class YourComponent implements AfterViewInit {
  alertMessage: string = '';
  alertType: string = '';

  constructor(private cdr: ChangeDetectorRef) {}

  ngAfterViewInit(): void {
    const componentThis = this;
    $('#subtreeAlert').on('click', function(event, message) {
      // 第二个参数message就是jQuery trigger传入的自定义参数
      componentThis.showsubtreeAlert(message);
    });
  }

  showsubtreeAlert(message: string){
    this.alertMessage =  message;
    this.alertType = 'warning';
    $('#alertBox').modal({backdrop: "static", keyboard: false, show: true});
    // 手动触发变更检测，避免Angular视图不更新变量
    this.cdr.detectChanges();
  }
}

3. 修改外部JS的trigger调用，将参数包裹为数组，兼容jQuery的传参规则：

function A(){
  var activeMessage = "xyzz";
  window.parent.parent.$('#subtreeAlert').trigger('click', [activeMessage]);
}

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