如何处理 angular 2 中的菜单

Question

当用户单击一个选项时，我想将类设置为活动状态并运行一个函数。 我尝试将我的 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"});
}

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

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

<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。

Answer 1

使用 Angular 处理活动链接。

当 URL 与提供给routerLink指令的 URL 相同时， routerLinkActive指令将自动设置活动类。

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

对于另一部分，您可以使用ngClass指令将类应用于元素。

使用 Angular 更改元素样式。

与使用 JQuery 时获取元素并在其上应用样式不同，使用 Angular 我们必须声明样式，然后将它们应用到元素。

@Component({
    selector: 'my-nav',
    template: `
        <nav>
            <a>...</a>
            <a>...</a>
            /* We apply the styles. */
            <div class="underline" 
                 [style.top]="underlineTop" 
                 [style.left]="underlineLeft">
            </div>
        </nav>
    `
})
export class MyNavComponent {
     /* We declare the styles. */
     underlineTop = '0px';
     underlineLeft = '0px';

     changeUnderlinePosition(x, y) {
         /* Change the position here... eg: */
         underlineTop =  x + 'px';
         underlineLeft = y + 'px';
     }
}

在现实世界的上下文中，位置逻辑可能应该封装在指令中。

笔记

Angular 使用与 JQuery 非常不同的方式来做事，所以代码不能真正转换。

如果我的回答不能让你满意。 请告诉我，我会努力解决的。