这个也可以

<a (click)='myFunc()'>Click Here </a>

(onclick)在带有bootstrap的Angular项目中并不适用。

将onclick放在href中会冒犯那些坚信内容与行为/动作分离的人。争论的焦点是你的html内容应该只关注内容，而不是表现形式或行为。

现在的典型路径是使用javascript库(例如。Jquery)，并使用该库创建一个事件处理程序。它看起来像这样:

$('a').click( function(e) {e.preventDefault(); /*your_code_here;*/ return false; } );

首先，将url放在href中是最好的，因为它允许用户复制链接，在另一个选项卡中打开等等。

在某些情况下(例如HTML频繁变化的网站)，每次更新都绑定链接是不实际的。

典型绑定方法

正常的链接:

<a href="https://www.google.com/">Google<a/>

JS的代码是这样的:

$("a").click(function (e) {
    e.preventDefault();
    var href = $(this).attr("href");
    window.open(href);
    return false;
});

这种方法的好处是清晰地分离标记和行为，并且不必在每个链接中重复函数调用。

不绑定方法

然而，如果你不想每次都绑定，你可以使用onclick并传入元素和事件，例如:

<a href="https://www.google.com/" onclick="return Handler(this, event);">Google</a>

这是JS的:

function Handler(self, e) {
    e.preventDefault();
    var href = $(self).attr("href");
    window.open(href);
    return false;
}

这种方法的好处是你可以随时加载新链接(例如通过AJAX)，而不必担心每次都要绑定。

最好的方法是:

<a href="#" onclick="someFunction(e)"></a>

问题是这将在浏览器中添加一个散列(#)到页面URL的末尾，从而要求用户单击返回按钮两次才能进入您的页面之前的页面。考虑到这一点，您需要添加一些代码来停止事件传播。大多数javascript工具包已经有了这个函数。例如，dojo工具包使用

dojo.stopEvent(event);

这样做

上面的答案是一个非常糟糕的做法，永远不要链接到空哈希，因为它可能会在后面产生问题。

最好的方法是将事件处理程序绑定到元素上，就像许多人所说的那样，但是<a href="javascript:doStuff();“>do stuff</a>在每个现代浏览器中都能完美地工作，我在渲染模板时广泛使用它，以避免为每个实例重新绑定。在某些情况下，这种方法提供了更好的性能。YMMV

另一个有趣的消息是....

Onclick和href在直接调用javascript时有不同的行为。

onclick将正确地传递这个上下文，而href不会，换句话说，<a href="javascript:doStuff(这个)">没有上下文</ >将不工作，而<a onclick="javascript:doStuff(此)">no context</a>将。

是的，我省略了href。虽然这并不符合规范，但它可以在所有浏览器中工作，尽管理想情况下，它应该包括一个href="javascript:void(0);"作为良好的衡量标准

这个也可以

<a (click)='myFunc()'>Click Here </a>

(onclick)在带有bootstrap的Angular项目中并不适用。