如何让这个onclick转到一个动态的url？

Question

所以我有一个指向此处链接页面的点击：

<li id="toHover" onclick=" window.open('https://www.linkedin.com/in/jvanderkooi/?originalSubdomain=nl','_blank')" class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

效果很好，它使用提供的 url 打开一个新的 window 并保持另一个打开。但是，我不想使用此内置 url，而是希望此元素获得某个用户的 url 属性。像这样：

<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" 
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

当我这样做时，一个新的 window 打开了我的网络应用程序的根目录。我目前运行这只在本地主机上所以我到达 http://localhost:8080 我的应用程序是运行而不是提供的 linkedin 页面 url。

我尝试了很多不同的方法，但似乎无法让它发挥作用。我在这里错过了什么？

编辑：这是我为此循环浏览的 div 的其余部分，以防它清除问题。

<div class="container" id="main-container">
            <div class="row">
                <div *ngFor= "let user of users" class ="col-md-6 col-xl-3">
                    <div class="card m-b-30">
                        <div class="card-body row">
                            <div class="col-6">
                                <!-- <a href=""><img src="{{user?.imageUrl}}" alt="" class="img-fluid rounded-circle w-60"></a> -->
                                <a href=""><img src="{{user?.photo}}" alt="" class="img-fluid rounded-circle w-60"></a>
                            </div>
                            <div class="col-6 card-naam align-self-center mb-0">
                                <h5>{{user.name}}</h5>
                                <p class="m-0">{{user.function}}</p>
                            </div>
                        </div>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item"><i class="fa fa-envelope float-right"></i>{{user.email}} <a href="#"></a></li>
                            <li class="list-group-item"><i class="fa fa-phone float-right"></i>Nummer: {{user.phoneNumber}}</li>
                            <li *ngIf="user.admin"  class="list-group-item"><i ></i>Admin</li>
                        </ul>
                        <div class="card-body">
                            <div class="float-right btn-group btn-group-sm">
                                <a (click)="onOpenModal(user, 'edit')" class="btn btn-primary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Edit"><i class="fa fa-pencil"></i> </a>
                                <a (click)="onOpenModal(user, 'delete')" class="btn btn-secondary tooltips" data-placement="top" data-toggle="tooltip" data-original-naam="Delete"><i class="fa fa-trash"></i></a>
                            </div>
                            <ul class="social-links list-inline mb-0">
                                <style>
                                    #toHover{
                                        cursor: pointer;}
                                </style>
                 <li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" 
class="list-inline-item"><a naam="" data-placement="top" data-toggle="tooltip" 
class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

Answer 1

这里是你的解决方案，即使 .focus() 激活它：

document.querySelector('.open-url').addEventListener('click', function (e){
    e.preventDefault();
    window.open(this.href, '_blank').focus();
});

<li id="toHover" class="list-inline-item">
    <a href="https://google.com" data-placement="top" data-toggle="tooltip" class="tooltips open-url" data-original-naam="LinkedIn">Link</a>
</li>

Answer 2

这是由于 li 内的锚点 a 元素。

使用下面的

<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" ></li> 如果你需要使用 a 标签，那么你可以试试这个并指定目标 blank

<li id="toHover"   
class="list-inline-item"><a naam="" target="_blank" href="user.linkedinURL" data-placement="top" data-toggle="tooltip" class="tooltips" data-original-naam="LinkedIn"><i class="fa fa-linkedin"></i></a></li>

如何让这个onclick转到一个动态的url？

How to make this onclick go to a dynamic url?

html

angular