如何讓這個onclick轉到動態url？

所以我有一個指向鏈接頁面的onclick：

<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 的新視窗，并讓另一個視窗保持打開狀態。但是，我不想使用這個內置 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>

當我這樣做時，一個新視窗會打開我的網路應用程式的根目錄。我目前僅在 localhost 上運行它，所以我訪問了我的應用程式正在運行的 http://localhost:8080，而不是提供的鏈接頁面 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="如何讓這個 onclick 轉到動態 url？" ></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>

uj5u.com熱心網友回復：

a這是由于li.

使用以下

<li id="toHover" onclick="window.open(user.linkedinURL, 'new_window')" ></li> 如果你需要使用a標簽，那么你可以試試這個并指定目標空白

<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>

uj5u.com熱心網友回復：

在這里，您的解決方案甚至.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>

標籤：html 有角度的

上一篇：在Angular13中的firebase集成期間找不到名稱“PhoneOrOauthTokenResponse”

下一篇：從另一個組件切換sidenav角度