Javascript 如何在选项卡之间动态路由?
我有一个mat-tab angular应用程序。我想动态获取链接并传输到navLinks对象。我这样做了,但不起作用。可以为id参数指定类似“/1”的字符串,但我进行了concatation,但它不起作用(我检查了连接是否正确)。下面是我尝试的内容 TS文件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;
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不会更改。您可以从控制台向我发送错误吗?可能路由器配置中未绑定路由?请提供浏览器控制台中显示的错误。