在 Blazor 中的单击事件上切换 CSS 活动类答案

【问题标题】：Toggling CSS active classes on click events in Blazor在 Blazor 中的单击事件上切换 CSS 活动类
【发布时间】：2020-03-26 23:45:28
【问题描述】：

我正在尝试找到使用 Blazor 点击事件打开和关闭 css 类的最佳方法。此功能涉及单击由@foreach 生成的列表框列并仅更改活动框的样式，然后通过随后单击其他框来禁用它。简而言之，只有活动框在点击时改变样式，其他所有框都没有样式改变。

我从下面的代码开始，它正确地创建了这些框，但是它将“活动”应用于所有列表框，而不仅仅是当前活动的框（这仍在 POC 中，所以一些代码仍然需要重构）：

 @foreach (var msg in Message)
            {
                <a class="list-group-item list-group-item-action @(ActiveClass ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                    <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                </a>
            }

private bool ActiveClass { get; set; }

 public void popIt(int num)
{
    var text = Message[num].MessageText;
    var subject = Message[num].Subject;
    Subject = subject;
    MessageText = text;
    DateCreated = Message[num].DateCreated;
    ActiveClass = true;
}

Angular 8 具有内置的“ngClass”。以下代码适用于这种情况 - Blazor 有类似的东西吗？我还注意到 Angular click 可以处理两个输入，这是我在 Blazor 中还没有看到的：

 <div *ngFor="let msg of messages; let i = index" >
        <a class="list-group-item list-group-item-action" data-toggle="list" href="#home" role="tab" [ngClass]="{ 'active' : msg == activeMessage}"(click)="activeMessage = msg;popIt(i)">
          <span id="msgSubject1">{{msg.Subject}}</span><br /><span class="datetimeCls" id="datetime1">{{msg.DateCreated | date : 'short' }}</span>
        </a>
      </div>
    </div>

【问题讨论】：

我想我想出了这一点 - 有时输入问题有助于解决问题。

标签： css blazor

【解决方案1】：

下面的代码似乎工作。它创建一个名为“ActiveMessageId”的新变量，并将单击的消息 ID 分配给该消息。

         @foreach (var msg in Message)
                    {
                        <a class="list-group-item list-group-item-action @(ActiveMessageId == msg.MsgId ? "active" : "")"  data-toggle="list" href="#home" role="tab" @onclick="() => popIt(msg.MsgId)">
                            <span id="msgSubject1">@msg.Subject</span><br /><span class="datetimeCls" id="datetime1">@msg.DateCreated</span>
                        </a>
                    }

      private int ActiveMessageId { get; set; }

public void popIt(int num)
    {
        var text = Message[num].MessageText;
        var subject = Message[num].Subject;
        Subject = subject;
        MessageText = text;
        DateCreated = Message[num].DateCreated;
        ActiveMessageId = num;
    }

【讨论】：