角度を使用して新しいタブでリンクを開く方法は？

新しいタブでリンクを開く必要がある角度5コンポーネントがあります。次のことを試しました。

<a href="www.example.com" target="_blank">page link</a>

リンクを開くと、アプリケーションが遅くなり、次のようなルートが開きます。

localhost:4200/www.example.com

私の質問は：これを角度で行う正しい方法は何ですか？

を使用しwindow.open()ます。それはかなり簡単です！

あなたのcomponent.htmlファイルで-

<a (click)="goToLink("www.example.com")">page link</a>

あなたのcomponent.tsファイルで-

goToLink(url: string){
    window.open(url, "_blank");
}

次のように完全なURLをhrefとして使用してください。

<a href="https://www.example.com/" target="_blank">page link</a>

<a [routerLink]="" (click)="openSite(SiteUrl)">{{SiteUrl}}</a>

およびComponent.ts内

openSite(siteUrl) {
   window.open("//" + siteUrl, '_blank');
}

でapp-routing.modules.tsファイル：

{
    path: 'hero/:id', component: HeroComponent
}

でcomponent.htmlファイル：

target="_blank" [routerLink]="['/hero', '/sachin']"

ルーターで新しいタブを開く別の方法を発見しました。

テンプレートで、

<a (click)="openNewTab()" >page link</a>

また、component.tsで、serializeUrlを使用して、ルートを文字列に変換できます。これは、 window.open()

openNewTab() {
  const url = this.router.serializeUrl(
    this.router.createUrlTree(['/example'])
  );

  window.open(url, '_blank');
}

これを試して：

 window.open(this.url+'/create-account')

使用する必要はありません'_blank'。window.openデフォルトでは、新しいタブでリンクが開きます。

に追加target="_blank"するだけです

<a mat-raised-button target="_blank" [routerLink]="['/find-post/post', post.postID]"
    class="theme-btn bg-grey white-text mx-2 mb-2">
    Open in New Window
</a>

一部のブラウザは、によって作成されwindow.open(url, "_blank");たポップアップをブロックする場合があります。別の方法は、リンクを作成してクリックすることです。

...

  constructor(@Inject(DOCUMENT) private document: Document) {}
...

  openNewWindow(): void {
    const link = this.document.createElement('a');
    link.target = '_blank';
    link.href = 'http://www.your-url.com';
    link.click();
    link.remove();
  }

あなたはルートでプロパティをバインドしてみることができます

あなたのcomponent.tsで user:any = 'linkABC';

component.htmlで <a target="_blank" href="yourtab/{{user}}">new tab </a>