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

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 个解决方案

解决方案1
0 已采纳 2019-01-23 17:46:49

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-01-23 17:46:49

解决方案1
0 已采纳 2019-01-23 17:46:49