在 angular 中打開帶有路由的選項卡

Question

在這個地址localhost:4200/verify我有一個組件，在這個組件中，當用戶單擊按鈕到達這條路線中的其他組件時，我需要：

localhost:4200/user/info/3#personalInfo

在這條路線中，我有一個組件，並且在該組件中，我有一個mat-tab 。 當使用這個 url localhost:4200/user/info/3#personalInfo我需要打開第二個標簽。

演示

我如何在 angular 中完成這項工作？？？？

Answer 1

您可以在 HTML 中傳遞片段，例如：

<button [routerLink]="['infos']" fragment="tab2">Got To Tab2</button>

然后在 taber 組件中，獲取對片段的訪問權，

demo1TabIndex = 0;
constructor(private activatedRoute: ActivatedRoute) { }

ngOnInit() {
  const fragment = this.activatedRoute.snapshot.fragment;
  console.log('fg', fragment);
  // You can do any type of manipulation you want to get the index value and set it to demo1TabIndex variable.
  switch (fragment) {
    case 'tab1':
      this.demo1TabIndex = 0;
      break;
    case 'tab2':
      this.demo1TabIndex = 1;
      break;
    case 'tab3':
      this.demo1TabIndex = 2;
      break;
  }
}