按角度制作指向页面的外部链接 - 我无法转到外部页面

Question

问题是：

如何使 html 或 ts 上的链接正常工作？ 我需要一些指向我的应用程序外部页面的链接。我有用户个人资料和个人资料我有指向该用户社交帐户的链接（例如instagram.com/sisterofclara）但在此表单上：

<div class="col-md-12"  *ngFor="let currentAccountObject of user.userContact.accounts">
   <div class="margin-10-px" >
       <div class="col-md-1 font-bold"> 
          <img[src]="getIcon(currentAccountObject.socialAccountType)">
       </div>
       <div class="col-md-9 font-bold"> {{currentAccountObject.login}}
       </div>
   </div>
</div>

我无处可去，因为当我点击链接时，我的链接总是在短语前有localhost:3000。总是。

我尝试使用 uri 作为参数在 angular 上创建 click 函数，函数看起来像这样：

 public goToProfile(url) {
    window.location.href = url;
  }

我通过点击尝试了它，我尝试了href={{person.link}}，我尝试了这个功能，我也尝试了location.replace(uri)，但没有任何效果（因为添加了我的localhost 开头）。为什么？

编辑：这是html：

 <div class="row col-md-12 contact">
            <div *ngIf="contactTabEditable==false">
              <div class="col-md-12 ro-label" align="left">Social media:</div>
              <div class="col-md-10 social-media">
                <div>
                  <div class="col-md-12"  *ngFor="let currentAccountObject of user.userContact.accounts">
                      <div class="margin-10-px" >
                          <div class="col-md-1 font-bold"><img [src]="getIcon(currentAccountObject.socialAccountType)"></div>
                          <div *ngIf="currentAccountObject.link" class="col-md-9 font-bold"> 
                            <a (click)="goToProfile(currentAccountObject.link)"> {{currentAccountObject.login}} </a>
                          </div>
                          <!-- <div *ngIf="!showClickableAccount" class="col-md-9 font-bold"> {{currentAccountObject.login}}</div> -->
                      </div>
                 </div>
                </div>
              </div>

            </div>
          </div>

Answer 1

您可以简单地使用 <a href="externalUrl"> 元素
如果你想使用数据绑定，绑定到你的元素，你可以使用以下：

<a [attr.href]="url"></a>

如果您的组件中有一个名为 url 的变量，例如：

public url = "https://google.com/";

另一种选择是：

<a href="{{url}}">URL</a>

或者，如果您的用户字段包含他的 Instagram 名称：
取自Docs：

<a [href]="'https://www.instagram.com/' + user.instagramName">URL</a>

Answer 2

我用下面的代码解决了这个问题

希望对你有所帮助。

只需用下面的代码替换你的函数

public goToProfile(url: string) {
        let u: string = '';
        if (!/^http[s]?:\/\//.test(url)) {
          u += 'http://';
        }
        u += url;
        let link = this.document.createElement("a");
        link.target = '_blank';
        link.href = u;
        link.setAttribute('visibility', 'hidden');
        link.click();
    }

在构造函数中添加文档

constructor(@Inject(DOCUMENT) private document: any){}

并像导入 DOCUMENT 一样

import { DOCUMENT } from '@angular/platform-browser';

如果您需要更多帮助，请告诉我

谢谢

Answer 3

试试下面的代码。我希望它对你有用。

<a href="website_address" target="”_blank”" rel="noopener noreferrer">Text</a>