Question

我有一个如下列表：

<a href=xx class="origin">text1</a>
<a href=xx class="origin">text2</a>
<a href=xx class="origin">text3</a>
<a href=xx class="origin">text4</a>
<a href=xx class="origin">text5</a>

我想要的是，当单击任何链接时，类名将自动更改为“已单击”，再次单击时，它将更改为“原点”。

在我脑海中这样的事情：

<a href=xx class="origin" 
onclick="this.class=this.class=='origin"?'clicked':'origin'>text</a>

如何使用Angular 4来实现呢？

Answer 1

有几种方法可以做到这一点，比其他方法更丑。

您可以为每个a标签分配其自己的唯一布尔值，在单击时切换其布尔值，并使其类取决于其布尔值。

<a href=xx class="origin" (click)="a = !a" [ngClass]="{'origin': !a, 'clicked': a}">text1</a>
<a href=xx class="origin" (click)="b = !b" [ngClass]="{'origin': !b, 'clicked': b}">text2</a>
<a href=xx class="origin" (click)="c = !c" [ngClass]="{'origin': !c, 'clicked': c}">text3</a>
<a href=xx class="origin" (click)="d = !d" [ngClass]="{'origin': !d, 'clicked': d}">text4</a>
<a href=xx class="origin" (click)="e = !e" [ngClass]="{'origin': !e, 'clicked': e}">text5</a>

或者，如果您不想创建多个唯一的布尔值，则可以使用a来引用单击的$event.target标签，并使用{{1 }}。

内联方式：

className

功能方式：

<a href=xx class="origin" (click)="$event.target.className = ($event.target.className === 'origin') ? 'clicked' : 'origin'">text1</a>

<a href=xx class="origin" (click)="toggleClass($event.target)">text1</a>

Answer 2

我会像下面这样：

HTML：

<a 
  *ngFor="let link of LINKS"
  [attr.href]="link.href"
  [ngClass]="{'origin': !link.isClicked, 'clicked': !link.isClicked}"
  (click)="toggleClass(link)"
>
  {{link.text}}
</a>

TS：

class Link {
  href: string;
  text: string;
  isClicked: boolean;
}

export class ExampleComponent {
  public readonly LINKS: Link[] = [
    {href: 'xxx', text: 'text1', isClicked: false},
    {href: 'xxx', text: 'text2', isClicked: false},
    {href: 'xxx', text: 'text3', isClicked: false},
    {href: 'xxx', text: 'text4', isClicked: false},
    {href: 'xxx', text: 'text5', isClicked: false},
  ];

  public toggleClass(link: Link): void {
    link.isClicked = !link.isClicked;
  }
}

Answer 3

尽管以上所有答案都是正确的，但出于可维护性考虑，我建议创建一条指令为您处理

<a toggler class="origin">text1</a>
<a toggler class="origin">text2</a>
<a toggler >text3</a>
<a toggler >text4</a>
<a toggler class="origin">text5</a>

toggler.directive.ts

import { Directive, HostListener, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[toggler]'
})
export class TogglerDirective {

  constructor(private renderer: Renderer2,
               private elementRef: ElementRef) { }

  @HostListener('click', ['$event']) onClick($event){
    if (!$event.target.className.includes('clicked')) {
      this.removeClass('origin', $event.target);
      this.addClass('clicked', $event.target);
    } else {
      this.removeClass('clicked', $event.target);
      this.addClass('origin', $event.target);
    }
  }  

  addClass(className: string, element: any) {
       this.renderer.addClass(element, className);
   }

   removeClass(className: string, element: any) {
       this.renderer.removeClass(element, className);
   }
}

参见此stackblitz中的工作示例（不要忘记将TogglerDirective添加到app.module）

即使您不需要在链接上设置“起源”的初始类别

Answer 4

您可以使用ngClass绑定属性来实现。

private void button1_Click(object sender, EventArgs e)
    {
        LinqTestDataContext ctx = new LinqTestDataContext("Data Source=.;Initial Catalog=valveManagement2018;Integrated Security=True");
        var data = ctx.valves.AsQueryable();

        if (rbvalveStreet.Checked)
        {
            if (!string.IsNullOrEmpty(valveStreet.Text))
            {
               data = data.Where(p => p.valveStreet.Contains(valveStreet.Text));
            }
        }
        if (rbtypeId.Checked)
        {
               data = data.Where(p => p.typeId == cbTypeId.selectedIndex);
        }

        var qryFinal = data.Select( p => new { p.valveId, p.aTId, p.typeId,p.valveStreet });

        dgv.DataSource = qryFinal.ToList();
    }

内部组件：

<a href=xx (click)=handleClick() [ngClass]="{'origin' : !isclicked, 'clicked' : isclicked }">text1</a>

单击角在类之间切换

4 个答案: