angular 如何在 href 和 routerlink 之间添加条件路由

Question

我有一个变量

/my/internal/route
或
https://externalroute.ch.

在第一个选项中，我将只路由到延迟加载的目标页面。
第二个，我会打开它到一个新的页面。

我试过这样做

<a [routerLink]="url" [target]="url.includes('https') ? '_blank' : '_self'">my link</a>

并遵循此 idea

但其中 none 有效。

要求

我需要让 google SEO 机器人可以抓取我的网站。这就是我没有用方法完成的原因。

Answer 1

也许示例中添加的示例确实有效，但它不适合我。 可能是因为我运行通过 Iframe 访问网站。

但我确实提供了一个添加正确属性的解决方案，具体取决于我是否有其他主机名。这是我能想到的最好的解决方案。

创建指令
倾听变化
正在分析 url 是否包含与实际网站相同的命名空间。
如果没有，请添加所需的属性并订阅点击监听器因为对我来说默认的监听器不起作用

import { isPlatformBrowser } from '@angular/common'
import { Directive, ElementRef, HostBinding, Inject, Input, PLATFORM_ID } from '@angular/core'

@Directive({
  selector: 'a[href]',
})
export class ExternalLinkDirective {
  @HostBinding('attr.rel') relAttr = null
  @HostBinding('attr.target') targetAttr = null
  @HostBinding('attr.href') hrefAttr = ''
  @Input() href: string

  constructor(@Inject(PLATFORM_ID) private platformId: string, private elementRef: ElementRef) {}

  ngOnChanges() {
    this.hrefAttr = this.href

    if (this.isLinkExternal()) {
      this.relAttr = 'noopener'
      this.targetAttr = '_blank'

      this.elementRef.nativeElement.addEventListener('click', () => {
        window.open(this.href, '_blank', 'noopener')
      })
    }
  }

  private isLinkExternal() {
    return (
      this.href?.includes('http')
    )
  }
}

感谢 this article 给我代码

angular 如何在 href 和 routerlink 之间添加条件路由

How to add a conditional routing between href and routerlink in angular

angular

angular-router

要求