如何使用纯角度 2 无 jquery 获取下一个 li 和上一个 li

Question

我有一个这样的数组

this.tabMenuItems = [
        {
          "tabId":1,
          "item":"2017",
          "link":['/artists',this.artistId,'edit']  
        },
        {
          "tabId":2,
          "item":"2016" ,
          "link":['/artists',this.artistId,'edit'] 
        },
        {
          "tabId":3,
          "item":"2015" ,
          "link":['/artists',this.artistId,'edit'] 
        }
        
      ];

我有一个以这种方式绑定的模板，作为标签

<

div class="tab-menu">   
      <ul>
          <li #tabMenuTemplate
              [routerLink]="menu.link" 
              [ngClass]="{'current': isActive(menu.link)}"
              class="tabmenu-{{index}}"
              *ngFor="let menu of tabMenuItems;let index = index"> {{menu.item}} </li>
      </ul>
    
      <button (click)="onNavMenuClick('left')" class="tab-left-arrow"></button>

  <button (click)="onNavMenuClick('right')"class="tab-right-arrow"></button>

</div>

如果我们单击下一个或上一个按钮，我需要移动到另一个选项卡。我尝试使用组件中的@ViewChild 使用模板引用来访问它。

这边@ViewChild("tabMenuTemplate") tabMenuTemplate;

var next =new ElementRef(this.tabMenuTemplate.nativeElement.nextSibling);

但无法达到预期。请提出最好的方法

Answer 1

您已经有一个要循环生成选项卡的数组，您可以简单地使用它来确定当您单击下一个或上一个时要导航到哪个，根据您当前的选择，您不需要获取实际的选项卡元素。

所以在您的下一个返回事件中，您可以使用router.navigate() 根据您在数组中的位置移动到不同的链接。

您也可以使用RouterLinkActive 来激活所选链接。

这是一个简单的StackBlitz example!!

HTML

<ul>
    <li *ngFor="let menu of tabMenuItems;let index = index" (click)="setTab(index)">
        <a [routerLink]="menu.link"  routerLinkActive="active-link">
            {{menu.item}}
        </a>
    </li>
</ul>
<hr />
<button (click)="back()" [disabled]="selectedTab == 0">Previous</button>
<button (click)="next()" [disabled]="selectedTab == tabMenuItems.length-1">Next</button>
<hr />
<router-outlet></router-outlet>

组件

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  tabMenuItems = [
    {
      "tabId": 1,
      "item": "child1",
      "link": ['/child1']
    },
    {
      "tabId": 2,
      "item": "child2",
      "link": ['/child2']
    },
    {
      "tabId": 3,
      "item": "child3",
      "link": ['/child3']
    }
  ];

  selectedTab = 0;

  constructor(private router: Router) { }

  setTab(index) {
    this.selectedTab = index;
  }

  next() {
    if (this.selectedTab < this.tabMenuItems.length) {
      this.selectedTab++;
      this.router.navigate(this.tabMenuItems[this.selectedTab].link);
    }
  }

  back() {
    if (this.selectedTab > 0) {
      this.selectedTab--;
      this.router.navigate(this.tabMenuItems[this.selectedTab].link);
    }
  }
}