Javascript 如何在选项卡之间动态路由?

Javascript 如何在选项卡之间动态路由?,javascript,html,angular,typescript,Javascript,Html,Angular,Typescript,我有一个mat-tab angular应用程序。我想动态获取链接并传输到navLinks对象。我这样做了,但不起作用。可以为id参数指定类似“/1”的字符串,但我进行了concatation,但它不起作用(我检查了连接是否正确)。下面是我尝试的内容 TS文件 export class CarsComponent implements OnInit { navLinks: any[]; public href: string = ""; activeLinkIndex = -1;

我有一个mat-tab angular应用程序。我想动态获取链接并传输到navLinks对象。我这样做了,但不起作用。可以为id参数指定类似“/1”的字符串,但我进行了concatation,但它不起作用(我检查了连接是否正确)。下面是我尝试的内容

TS文件

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:  this.newString,
          index: 0
      }, {
          label: 'Tuning',
          link: './tabtest2',
          index: 1
      }, {
          label: 'Payment',
          link: './tabtest3',
          index: 2
      }, 
  ];
   }
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>

{{link.label}

我复制了您的实现,并获取了有关“RouterLink活动”(Angular 8.1.2)处理的错误信息。模板中的以下更改适用于我:

<a mat-tab-link 
  *ngFor="let link of navLinks" 
  [routerLink]="link.link" 
  routerLinkActive="active">

    {{ link.label }}

</a>

{{link.label}

如果路由处于活动状态,Angular会自动添加一个“.active”类。您可以在以后使用css设置活动路由的样式。

您的控制台中会出现什么错误,您使用的是什么角度版本?我使用的与您使用的相同。当新的URL出现时,URL不可识别,并且URL不会更改。您可以从控制台向我发送错误吗?可能路由器配置中未绑定路由?请提供浏览器控制台中显示的错误。