如何访问Angular项目中指定组件标签对应的控制器？

要从外部jQuery代码里修改Angular组件的状态，你得先拿到<material-app>对应的Angular组件实例，再修改组件内部的状态属性，最后确保Angular触发变更检测更新视图。具体步骤如下：

1. 利用Angular全局API获取组件实例 #

Angular应用启动后，全局window对象会暴露ng对象（默认配置下），我们可以用它来获取指定DOM元素绑定的组件实例。

2. 修改你的jQuery点击事件代码 #

把你现有的点击事件逻辑替换成下面的代码：

$(function(){
  $('.button_reset').click(function(){
    // 1. 提取输入框中的状态列表，过滤空行
    var arr_states = $('.textarea_states').val().split('\n').filter(function(elem){
      return elem.trim() != '';
    });

    // 2. 获取<material-app>元素
    const appElement = document.querySelector('material-app');
    
    // 3. 获取对应的Angular组件实例
    const appComponent = ng.getComponent(appElement);

    if (appComponent) {
      // 4. 修改组件内控制select状态的属性（这里假设属性名为selectedStates，需和组件内真实属性一致）
      appComponent.selectedStates = [...arr_states];
      
      // 5. 触发Angular变更检测，确保视图同步更新
      appComponent.ngZone.run(() => {});
    }
  });
});

关键细节说明 #

• ng.getComponent：这是Angular官方提供的全局方法，专门用于从外部获取DOM元素绑定的Angular组件实例，是最安全的外部访问方式。
• 组件属性名替换：我假设你的<material-app>组件中控制select选中项的属性是selectedStates，你需要对照原组件代码（比如「Reset to: [ New York, Chicago, Los Angeles ]」按钮绑定的属性），把它替换成组件内真实的属性名称。
• ngZone.run()：因为我们是在Angular外部（jQuery事件回调）修改组件状态，必须通过NgZone通知Angular执行变更检测，否则视图不会同步更新。

额外建议 #

这种外部访问Angular组件的方式尽量少用，它会破坏Angular的组件封装性。如果项目允许，更优的做法是把重置按钮集成到Angular组件内部，通过组件的输入输出或共享服务来实现状态控制。

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