angular - 带有 angular2 4 选项卡的动态路由

Question

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

实际上，我有一个侧边栏，其中我有动态 TreeView 导航，如下图和右侧我有 4 个选项卡默认选项卡 1 将被选中，我在其中显示事件链接的数据

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

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

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

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

现在我的问题是，如果我想使用相同的链接导航到 tab2 组件，那么我的路由 url 应该如何设置。

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/../../....']);

现在，如果我们想将参数传递给 ** 路由，那么您需要在导航时使用如下所示的查询参数

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);
    });
}