Question

我有一个转到链接的按钮，但是当访问者是创建页面的用户时，该按钮也需要有一个X，以便用户所有者可以删除它。

1）标签：有效的解决方案存在以下问题：我可以制作2个按钮，但是很难直观地看出每个按钮对应的X（当有多个时）。

2）标签：另一方面，当我将它们放在一起时，您无法单击X，因为它总是将您带到按钮的链接。

需要：我需要一个包含两个部分的按钮，一个部分用于删除X，另一部分用于文本链接，但是我看不到该怎么做。请看图片。

<div class="g-mb-30">
<h6 class="g-color-gray-dark-v1">
        <button id="jh-create-entity"
        *ngIf="owner === post.userId" 
        class="btn btn-primary float-right jh-create-entity create-tag"
        [routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
        <fa-icon [icon]="'plus'"></fa-icon>
    </button>
<strong class="g-mr-5">Tags:</strong>
<span  *ngFor="let tag of post.tags">
    <a (click)="removePostTag(tag.id, post.id)">
        <fa-icon [icon]="'times'"></fa-icon>
    </a>
    <a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
        {{tag.tagName}}
    </a>
</span>
</h6>


<h6 class="g-color-gray-dark-v1">
        <button id="jh-create-entity"
        *ngIf="owner === post.userId" 
        class="btn btn-primary float-right jh-create-entity create-tag"
        [routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
        <fa-icon [icon]="'plus'"></fa-icon>
    </button>
    <strong class="g-mr-5">Tags:</strong>
    <span  *ngFor="let tag of post.tags">
        <a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
        <span>
            <a (click)="removePostTag(tag.id, post.id)">
                <fa-icon [icon]="'times'"></fa-icon>
            </a>
        </span>    
            {{tag.tagName}}
        </a>
    </span>
</h6>

编辑韦恩：由于X（删除）无效，因此无法正常工作

                          <h6 class="g-color-gray-dark-v1">
                            <button id="jh-create-entity"
                                *ngIf="owner === post.userId" 
                                class="btn btn-primary float-right jh-create-entity create-tag"
                                [routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
                                <fa-icon [icon]="'plus'"></fa-icon>
                            </button>
                            <strong class="g-mr-5">Tags:</strong>
                            <section style="display: flex; justify-content: space-around;">
                            <span  *ngFor="let tag of post.tags">
                                <a [routerLink]="['/tag', tag.id, 'view' ]" class="u-tags-v1 g-font-size-12 g-brd-around g-brd-gray-light-v4 g-bg-primary--hover g-brd-primary--hover g-color-black-opacity-0_8 g-color-white--hover rounded g-py-6 g-px-15 g-mr-5">
                                <span>
                                    <a (click)="removePostTag(tag.id, post.id)">
                                        <fa-icon [icon]="'times'"></fa-icon>
                                    </a>
                                </span>    
                                    {{tag.tagName}}
                                </a>
                            </span>
                            </section>
                        </h6>

Answer 1

当前，在第二个解决方案（从UX的角度来看，我建议），在链接到/ tag的元素中有X图标。

如果将该图标移到锚点的外部，它应该可以正常工作。

在下面查看我的快速示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  </head>
  <body>

    <section style="display: flex; justify-content: space-around;">
      <span style="border: 1px solid gray; padding: 5px;">
        <a onclick="remove()"><i class="fas fa-times"></i></a>
        <a onclick="link()">Link</a>
      </span>
      <span style="border: 1px solid gray; padding: 5px;">
        <a onclick="remove()"><i class="fas fa-times"></i></a>
        <a onclick="link()">Link</a>
      </span>
      <span style="border: 1px solid gray; padding: 5px;">
        <a onclick="remove()"><i class="fas fa-times"></i></a>
        <a onclick="link()">Link</a>
      </span>
      <span style="border: 1px solid gray; padding: 5px;">
        <a onclick="remove()"><i class="fas fa-times"></i></a>
        <a onclick="link()">Link</a>
      </span>
    </section>

  </body>
  <script>
    function remove() {
      alert('Removed an element!');
    }

    function link() {
      alert('Clicked a link!');
    }
  </script>
</html>

编辑：已更改为使用FA，以使其更加清晰。

编辑：这是一个示例，说明如何应用我在自己的代码中解释的内容。如果这不起作用，请检查CSS。

<h6 class="g-color-gray-dark-v1">
  <button id="jh-create-entity" *ngIf="owner === post.userId" class="btn btn-primary float-right jh-create-entity create-tag"
    [routerLink]="['/tag/new']" [queryParams]="{ 'postIdEquals': post.id }">
    <fa-icon [icon]="'plus'"></fa-icon>
  </button>
  <strong class="g-mr-5">Tags:</strong>
  <section style="display: flex; justify-content: space-around;">
    <span *ngFor="let tag of post.tags">
      // Note that here I have moved the X link to be a child of the span
      <a (click)="removePostTag(tag.id, post.id)">
        <fa-icon [icon]="'times'"></fa-icon>
      </a>
      // The tag name link is on the same level as the X (child of the span)
      <a [routerLink]="['/tag', tag.id, 'view' ]" class="removed-classes">
        {{tag.tagName}}
      </a>
    </span>
  </section>
</h6>

如何制作一个带有删除和链接的按钮？

1 个答案: