angular 操作DOM元素

<div #menuItems1 class="menu-item" (click)="jumpToPage('/user/ApplicatorList',menuItems1)" >

<span >applicator list</span>

</div>

constructor(private renderer2: Renderer2)

 

jumpToPage(jumpUrl: string,event:ElementRef){

this.el.nativeElement.querySelectorAll('.itemClick').forEach(element =>{//查出所有itemClick的class 然后删除掉

this.renderer2.removeClass(element,'itemClick');

})

this.renderer2.addClass(event,'itemClick');//添加当前的class

this.router.navigate([jumpUrl]);

}

 

 

.menu-item

{

cursor: pointer;

margin-top:20px;

height: 40px;

line-height: 40px;

font-size: 16px;

padding-left: 10px;

}

.menu-item:hover

{

color:#008dff;

}

.itemClick

{

background: #e6f7ff;

color:#008dff;

border-right: 3px solid #1890ff

}