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);
    }
  }
}

希望这会有所帮助!!

如何使用纯角2没有jquery获得下一个li和之前的li

1 个答案: