angular - 在 Angular2 中，mailto 链接被识别为组件路由

Question

我正在尝试在 Angular 项目中创建 mailto 链接。但不是打开视野。 Angular 将其作为组件路由。我该如何解决这个问题？

当我尝试以下代码时:

<a [href]="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="14796d5a75797154796d507b79757d7a3a777b79" rel="noreferrer noopener nofollow">[email protected]</a>"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f89581b699959db89581bc9795999196d69b9795" rel="noreferrer noopener nofollow">[email protected]</a></a>

当我单击链接时，我会被路由到一个未定义的页面。并得到以下错误消息:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'null'
Error: Cannot match any routes. URL Segment: 'null'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)```

Answer 1

您的 html 应该如下所示:

<a href="mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74190d3a15191134190d301b19151d1a5a171b19" rel="noreferrer noopener nofollow">[email protected]</a>"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="016c784f606c64416c78456e6c60686f2f626e6c" rel="noreferrer noopener nofollow">[email protected]</a></a>

请注意，href 属性周围没有 []。当您将属性包装在 [] 中时，它需要一个变量。

如果由于某种原因，您仍然想使用绑定(bind)，则可以将该值作为字符串传递:

<a [href]="'mailto:<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0ddc9fed1ddd5f0ddc9f4dfddd1d9de9ed3dfdd" rel="noreferrer noopener nofollow">[email protected]</a>'"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f39e8abd929e96b39e8ab79c9e929a9ddd909c9e" rel="noreferrer noopener nofollow">[email protected]</a></a>