Question

我有mat-tab角度应用程序。我想动态获取链接并转移到navLinks对象。我做到了，但不起作用。可以给id参数提供'./1'这样的字符串，但是我做了concatenation，它不起作用（我检查了concatenation是正确的）。这是我在下面尝试的方法

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>

Answer 1

我复制了您的实现，并得到有关“ routerLinkActive”（Angular 8.1.2）处理的错误。模板中的以下更改对我有用：

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

    {{ link.label }}

</a>

如果路由处于活动状态，Angular会自动添加“ .active”类。之后，您可以使用CSS设置活动路线的样式。

标签之间如何动态路由？

1 个答案: