angular2中带有选项卡的动态路由

Question

今天我遇到了路由问题，需要你们的帮助，

实际上，我有一个侧边栏，其中有动态树状视图导航，如下面和右侧，我有4个标签。默认情况下，将选择tab1以显示活动链接的数据

Link1
--sublink1
--sublink2
----sub2link1
------sub3link1
Link2
Link3
--sublink1
----sub2link1

像上面我有第N个子菜单一样，为此，我创建了一条路线

{ path: '**', component: tab1}

当我访问链接“ link1 / sublink2 / sub2link1”时，默认情况下它将是一个tab1组件

现在我的问题是，如果我想使用相同的链接导航到tab2组件，那么我的路线网址应该是什么。

Answer 1

我在回答自己的问题时使用下面的QueryParameter解决了这个问题：

我的路由模块将是：

const routes: Routes = [
{
  path: 'parent',
  component: parentComponent,
  children: [
    { path: '', component: allChildComponent},
    { path: '**', component: allChildComponent}
  ]
}
];

因此，这将接受导航，直到N条树状路线，例如/parent/child/sub_child1/sub_child2/../../....

this.router.navigate(['/parent/child/sub_child1/sub_child2/../../....']);

现在，如果我们要将参数传递给** route，则需要使用查询参数，该参数在导航时如下图所示

this.router.navigate(
   ['/parent/child/sub_child1/sub_child2/../../....'],
   {queryParams: 
       {param1: 'value1', param2: 'value2'}
   }
);

最后，您可以在组件中读取此参数，如下所示

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.sub = this.route.queryParams
    .subscribe(params => {
      console.log(params);
    });
}

Answer 2

如果没有编写一些自定义逻辑来保存状态，就无法通过像这样的全面路由来实现。

有两种方法可以实现所需的功能（下面的两个示例均显示）。

1. 使用独特的路线。 这样，您可以使用routerLink并可以根据路由器配置轻松确定哪个路由处于活动状态。 使用这种方法，您将无法使用** catchall路由，因为它取决于路由器。
2. 使用某种状态，并结合使用Observables，以便您可以从任何位置切换侧边栏并确定活动链接的方式。 使用这种方法，您可以使用** catchall路由，因为这并不取决于路由器。

我将在下面显示两个示例，但在此之前，我需要提出一个警告。 该答案基于您对业务逻辑的不了解。

我的意思是，如果侧边栏是数据驱动的，那么它可能会改变您的操作方式。 例如，我的应用程序中有一个类似于您的示例的树状视图侧边栏，但是我的是由数据库驱动的，这意味着每个项目都有唯一的标识符。 有了该ID，我可以只使用/topic/:topicId/subtopic/:subtopicId类的路由，并且可以轻松地在侧边栏上切换活动链接，只需监听路由器事件并设置一个活动链接（如果topicId当前位于该URL等于侧边栏链接上的特定topicId ，依此类推。 这使它变得微不足道。

不过，您可以在这里：

---

方法1

使用下面的树视图链接，您可以导航到以下链接，并且相应的链接将变为活动状态：

1. /link1
2. /link1/sublink1
3. /link1/sublink1/sub2link1
4. /link1/sublink2
5. /link2
6. /link3

边栏示例：

<ul>
    <li>
        <a [routerLink]="['/link1']" [routerLinkActive]="'active'">Link1</a>

        <ul>
            <li>
                <a [routerLink]="['/link1/sublink1']" [routerLinkActive]="'active'">Sublink1</a>

                <ul>
                    <li>
                        <a [routerLink]="['/link1/sublink1/sub2link1']" [routerLinkActive]="'active'">Sub2link1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a [routerLink]="['/link1/sublink2']" [routerLinkActive]="'active'">Sublink2</a>
            </li>
        </ul>
    </li>
    <li>
        <a [routerLink]="['/link2']" [routerLinkActive]="'active'">Link2</a>
    </li>
    <li>
        <a [routerLink]="['/link3']" [routerLinkActive]="'active'">Link3</a>
    </li>
</ul>

---

方法＃2

使用这种方法，而不是使用routerLink进行导航，您可能必须调用组件或服务中定义的某个位置的功能，并且它们的功能将在导航之前设置一些状态。 当它设置该状态时，侧栏将必须侦听更改（也许是Observable ），并且侧栏可以基于这些更改来切换某些链接的活动性。

这是一个伪代码示例：

模板：

<ul>
    <li>
        <a (click)="toggleSidebar('link1')" [class.active]="activeLink === 'link1'">Link1</a>
    </li>
    <li>
        <a (click)="toggleSidebar('link2')" [class.active]="activeLink === 'link2'">Link2</a>

        <ul>
            <li>
                <a (click)="toggleSidebar('link2/sublink1')" [class.active]="activeLink === 'link2/sublink1'">Link2 Sublink1</a>
            </li>
        </ul>
    </li>
</ul>

零件：

@Component({...})
export class MyComponent implements OnInit {
    activeLink: string;

    constructor(private sidebarService: SideberService) {}

    ngOnInit() {
        this.sidebarService.activeLink$.subscribe((activeLink: string) => {
            this.activeLink = activeLink;
        }));
    }

    toggleSidebar(activeLink: string) {
        this.sidebarService.activeLink.next(activeLink);
    }
}

服务：

@Injectable()
export class SidebarService {
    activeLink: ReplaySubject<string> = new ReplaySubject();
    activeLink$: Observable<string> = this.activeLink.asObservable();
}

现在，每当您向sidebarService.activeLink流中发送一个值时，sidebar组件（应订阅该observable）将获得活动的sidebar链接，然后可以在您的模板中使用它，如我的示例所示，以切换某个侧边栏链接。

如果希望边栏默认为某个链接，则可以从ReplaySubject切换为使用BehaviorSubject并为其提供默认值，例如link1 。 例如：

@Injectable()
export class SidebarService {
    activeLink: BehaviorSubject<string> = new BehaviorSubject('link1');
    activeLink$: Observable<string> = this.activeLink.asObservable();
}

在页面加载时，默认情况下，边栏中的link1将处于活动状态，因为那是流中的初始值。

Answer 3

现在我的问题是，如果我想使用相同的链接导航到tab2组件，那么我的路线网址应该是什么。

这是不可能的。 您需要将选项卡的状态保存在某个位置（例如在某些共享对象中），或者为每个选项卡创建新的路由。