Jquery 如何处理angular 2中的菜单

我想将该类设置为活动，并在用户单击一个选项时运行一个函数。 我尝试将我的JQuery代码转换为angular2，JQuery代码如下：

function setOption (segmented, option) {
    $(segmented+" span").removeClass("selected");
    const o = $(option);
    const u = $(segmented+">.underline");
    o.addClass("selected");
    o.css("animation","bounce 0.35");

    const p = o.position();
    const left = p.left+(o.width()-u.width())/2;
    const ttop = p.top+o.height()+10;

    //console.log("underline left="+left+"px,\ttop= "+ttop+"px\tw="+o.width()+"px");
    u.css({"top": ttop+"px", "left": left+"px"});
}

<nav #topMenu id="topMenu" class="ALADDIN-SegmentedControl" style="width: 460px">
    <a #menuOption routerLink="/dashboard" (click)="setOption('#topMenu', this)" class="menuOption active">Dashboard</a>
    <a #menuOption routerLink="/team" (click)="setOption('#topMenu', this)" class="menuOption">Équipe</a>
    <a #menuOption routerLink="/projects" (click)="setOption('#topMenu', this)" class="menuOption">Projets</a>
    <div #underline class="underline"></div>
</nav>

import {ElementRef} from '@angular/core';
import { Component, OnInit } from '@angular/core';


@ViewChild('menuOption') menuOption: ElementRef;
@ViewChild('underline') underline: ElementRef;

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styleUrls:  ['app/app.component.css'],
})

export class AppComponent implements OnInit {

    ngOnInit(): void {
        this.setOption('#topMenu', "#topMenu>a:first-child");
    }

    setOption (segmented: string, option: string) {

        console.log("menuOption="+JSON.stringify(menuOption));
        /*
        menuOption.map(
            function(d){d.nativeElement.removeClass("active")
        );
        */
    }
}

此函数仅将类设置为右选项，并将绝对定位的div.underline移动到活动选项下方

在angular2上，我的HTML片段如下所示：

function setOption (segmented, option) {
    $(segmented+" span").removeClass("selected");
    const o = $(option);
    const u = $(segmented+">.underline");
    o.addClass("selected");
    o.css("animation","bounce 0.35");

    const p = o.position();
    const left = p.left+(o.width()-u.width())/2;
    const ttop = p.top+o.height()+10;

    //console.log("underline left="+left+"px,\ttop= "+ttop+"px\tw="+o.width()+"px");
    u.css({"top": ttop+"px", "left": left+"px"});
}

<nav #topMenu id="topMenu" class="ALADDIN-SegmentedControl" style="width: 460px">
    <a #menuOption routerLink="/dashboard" (click)="setOption('#topMenu', this)" class="menuOption active">Dashboard</a>
    <a #menuOption routerLink="/team" (click)="setOption('#topMenu', this)" class="menuOption">Équipe</a>
    <a #menuOption routerLink="/projects" (click)="setOption('#topMenu', this)" class="menuOption">Projets</a>
    <div #underline class="underline"></div>
</nav>

import {ElementRef} from '@angular/core';
import { Component, OnInit } from '@angular/core';


@ViewChild('menuOption') menuOption: ElementRef;
@ViewChild('underline') underline: ElementRef;

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    styleUrls:  ['app/app.component.css'],
})

export class AppComponent implements OnInit {

    ngOnInit(): void {
        this.setOption('#topMenu', "#topMenu>a:first-child");
    }

    setOption (segmented: string, option: string) {

        console.log("menuOption="+JSON.stringify(menuOption));
        /*
        menuOption.map(
            function(d){d.nativeElement.removeClass("active")
        );
        */
    }
}

我遗漏了一些东西，我无法将menuOption元素捕获为数组。 我真的不明白如何将我以前的代码翻译成angular2。

使用angular2处理活动链接。 当URL与提供给指令的URL相同时，指令将自动设置活动类

<nav>
    <a routerLink="/dashboard" 
       routerLinkActive="active" 
       (click)="someFunction()">
        Dashboard
    </a>
    <a routerLink="/projects" 
       routerLinkActive="active" 
       (click)="someFunction()">
        Projects
    </a>
</nav>

在现实环境中，位置逻辑可能应该封装在指令中

<nav>
    <a routerLink="/dashboard" 
       routerLinkActive="active" 
       (click)="someFunction()">
        Dashboard
    </a>
    <a routerLink="/projects" 
       routerLinkActive="active" 
       (click)="someFunction()">
        Projects
    </a>
</nav>

注 Angular使用与JQuery完全不同的方式来处理代码 真的不能转换

---

如果我的回答不能让你满意。请告诉我，我会处理它。

是否使用UI第三个库是您的选择？因为Angular Material 2提供了上下文菜单的良好实现。（见：）好吧，在未来，如果我能使视觉适应我的设计。但目前，我需要让我自己的代码@MaximeélinasThanks@Maxime Gélinas工作，但它没有回答这个问题，因为我需要捕捉一个htmlélé元素（下划线）并改变它的位置。