javascript - mattab 之间的动态 URL 导航

Question

我有一个如下图所示的应用程序。我在导航链接中使用了 mattabs。

 this.navLinks = [
      {
          label: 'Preview',
          link:  './1',
          index: 0
      }, {
          label: 'Tuning',
          link: './tabtest2',
          index: 1
      }, {
          label: 'Payment',
          link: './tabtest3',
          index: 2
      }, 
  ];

在此代码部分中，当我按下预览时，它向我显示列表（数组）上的第二个元素。这正是我希望它工作的方式，但它应该动态控制。我进行了字符串连接并使用预览选项卡上的链接进行了更改，但是URL 无法识别。我的连接与链接属性上的“.1”完全相同这是我在下面尝试的

TS 文件

import { Component, OnInit } from '@angular/core';
import { Car } from './car.model';
import { CarService } from './car.sevice';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-cars',
  templateUrl: './cars.component.html',
  styleUrls: ['./cars.component.css']
})
export class CarsComponent implements OnInit {
  navLinks: any[];
  public href: string = "";
  activeLinkIndex = -1;
  mySubject;
  ngOnInit(): void {
    this.href = this.router.url;
    console.log(this.router.url);
    this.router.events.subscribe((res) => {
        this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
    });
    this.mySubject=this.carService.carrierSubject.subscribe(value=>
      {
        this.id=value;
        let numid=this.id.toString();
        this.newString="./".concat(numid);
        console.log(this.newString);
      })
  }
  newString:string='';
  id:number;
  car:Car;
  constructor(private carService:CarService,private route: ActivatedRoute,private router: Router) {
    this.navLinks = [
      {
          label: 'Preview',
          link:  '.1',
          index: 0
      }, {
          label: 'Tuning',
          link: './tabtest2',
          index: 1
      }, {
          label: 'Payment',
          link: './tabtest3',
          index: 2
      }, 
  ];
   }

  onTuning()
  {
    this.router.navigate(['tuning'], {relativeTo: this.route});
  }  
}

HTML

 <div class="row">
        <div class="col-md-5">
          <app-car-list></app-car-list>
        </div>
        <div class="col-md-7">
            <nav mat-tab-nav-bar>
                <a mat-tab-link
                *ngFor="let link of navLinks"
                [routerLink]="link.link"
                routerLinkActive #rla="routerLinkActive"
                [active]="rla.isActive">
               {{link.label}}
              </a>
              </nav>
              <router-outlet></router-outlet>     
        </div>
      </div>

标签： javascripthtmlangulartypescript