Question

HTML代码

RadGrid1.DataSource = inventory.GetAllInventorySummary();

TS代码

<div class="side-nav">
    <button type="button" class="btn  side_btn"  (click)="projects()">
        <i class="fa fa-tasks" aria-hidden="true"></i>
        <p>PROJECTS</p>
    </button>

    <button type="button" class="btn side_btn side_btn  side_btn_child" (click)="lifecycle()" >
        <i class="fa fa-life-ring" aria-hidden="true"></i>
        <p>LIFECYCLE</p>
    </button>  

    <button type="button" class="btn btn-default side_btn  side_btn_child" (click)="master()" >
        <i class="fa fa-asterisk" aria-hidden="true"></i>
        <p>MASTER</p>
    </button>
</div>

如何使用指令将活动类添加到单击的按钮？这样我就可以在该按钮上添加CSS。

如果按钮处于活动状态，我想使这些图标变为白色（#ffffff）。预先感谢。

Answer 1

步骤1：

创建如下所示的指令，其中activeLink是具有所需CSS的类：

consumeFromEmbeddedTopics()

第2步：

如下所示修改按钮，即添加nav-link属性，在点击处理程序中传递$ event并设置指令输入属性

@Directive({
    selector: '[nav-link]'
  })
  export class NavigationDir implements OnChanges {

    constructor(private element: ElementRef, private renderer: Renderer2) {

    }

    @Input() clickedLinkText:string;

    ngOnChanges(){
      this.renderer.removeClass(this.element.nativeElement,"activeLink");
      if(this.element.nativeElement.innerText.toLowerCase()==this.clickedLinkText){
        this.renderer.addClass(this.element.nativeElement,"activeLink");
      }    
    }
  }

第3步：

在您的TS文件中添加新属性，如下所示：

<button type="button" class="btn  side_btn"  (click)="YourClickHandler($event) nav-link [clickedLinkText]=selectedAnchorText">
        <i class="fa fa-tasks" aria-hidden="true"></i>
        <p>PROJECTS</p>
    </button>

第4步：

修改所有的OnClickEvent处理程序，如下所示：

 selectedAnchorText: string;

说明当您单击该按钮时，它将触发事件处理程序，并根据您的需要，将selectedAnchorText属性值设置为单击的按钮文本或ID。设置selectedAnchorText值将设置伪指令clickedLinkText输入属性，该属性将依次触发伪指令ngOnChanges生命周期钩子，您可以在其中检查并将活动类附加到被单击的按钮上。

我知道答案可能更简洁，更好。请随时进行改进。

希望有帮助！

我想将CSS添加到活动按钮..如何在角度添加活动类

1 个答案: