如何在 ReactJS 锚标签上停止 Angular $rootElement.on('click')？答案

【问题标题】：How to stop Angular $rootElement.on('click') on ReactJS anchor tag?如何在 ReactJS 锚标签上停止 Angular $rootElement.on('click')？
【发布时间】：2018-04-21 07:23:50
【问题描述】：

我的 AngularJS 和 ReactJS 都在同一个页面上运行。

但是当我点击任何 ReactJS <a> 标签时，Angular 的 $rootElement.on('click) 会被触发并重定向页面。我想在页面重定向之前在 ReactJS 中做一些功能。

我不想在 ReactJS 中进行更改，谁能建议我如何在 Angular 中处理这种情况？

【问题讨论】：

你说的是 AngularJS 中的# 路由吗？ routeProvider ?

标签： javascript angularjs reactjs angularjs-directive

【解决方案1】：

根据您的问题，您可以做的是，不要在 <a> 标签中添加 href 属性。而是将routing 位置传递给函数：

<a ng-click="redirect(your_routing_path)">Somethink</a>

在控制器中：

$scope.redirect = function(your_routing_path){
     // do what React gotta do and then redirect
     $location.path(your_routing_path);
 }

【讨论】：

<a href="url" onClick={handler}> 在 ReactJs 中有，但是 AngularJs 也会触发 Onlick，这是我的问题 cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.js 在上面的链接中找到 $rootElement.on('click', function(event) {
@HashirHussain ：是的，您能分享您的代码以及您要解决的业务目的吗？也许我可以提出一些解决方法。
let flag = false; //true in certain scenario const onClick = (url, event) => { if (flag) { //I don't want to redirect event.preventDefault(); } }; <a href={href} onClick={onClick.bind(this, href)} > {label} </a>

【解决方案2】：

我找到了解决方案。在 Angular run 中，我们可以简单地编写以下代码块：

/**
 * We do not need to handle on-click handler if element belongs to reactJS.
 */
 $rootElement.off('click', '[data-reactid]');

因此它不会处理任何点击场景。

【讨论】：