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

Question

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

实际上，我有一个侧边栏，其中有动态树视图导航，如下图和右侧我有 4 个选项卡默认选项卡 1 将被选中，其中我显示活动的数据 link

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

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

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

当我访问 Link "link1/sublink2/sub2link1" 默认它将是一个 tab1 组件

现在我的问题是，如果我想导航到具有相同 link 的 tab2 组件，那么我的路线 url 应该如何。

Answer 1

Now my question is if I want to navigate to tab2 component with the same link then how my route url should be.

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

Answer 2

如果不编写一些自定义逻辑来保存状态，就无法使用这样的包罗万象的路由来实现此目的。

有两种方法可以实现您想要的效果（下面显示了两个示例）。

使用独特的路线。这样您就可以使用 routerLink 并且可以根据路由器配置轻松确定哪个路由处于活动状态。使用这种方法，您不能使用 ** 通用路由，因为它取决于路由器。
使用某种状态，结合 Observables，这样您就可以从任何地方切换侧边栏并确定活动 link 的方式。通过这种方法，您可以使用 ** catchall 路由，因为这不依赖于路由器。

我将展示下面的两个示例，但在此之前我应该提出一个警告。该答案是基于对您的业务逻辑一无所知。

我的意思是，如果您的边栏是 data-driven，那么它可能会改变您做事的方式。例如，我的应用程序中有一个与您的示例类似的 tree-view 侧边栏，但我的侧边栏是 database-driven，这意味着每个项目都有一个唯一标识符。有了这个 ID，我就可以只使用像 /topic/:topicId/subtopic/:subtopicId 这样的路由，并且我可以通过监听路由器事件并设置一个活动的 link 来轻松切换侧边栏上的活动 link 如果当前在 URL 中的 topicId 等于边栏 link 上的特定 topicId，依此类推。这使它变得微不足道。

不过，给你：

方法 #1

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

/link1
/link1/sublink1
/link1/sublink1/sub2link1
/link1/sublink2
/link2
/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），并且侧边栏可以根据这些变化在某些 link 上切换活动。

这是一个伪代码示例：

模板：

<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 流发送一个值，侧边栏组件（应该订阅该可观察对象）将获得活动侧边栏 link，然后您可以在您的模板如我的示例所示，用于切换某个侧边栏 link.

如果你想让侧边栏默认为某个link，你可以从ReplaySubject切换到使用BehaviorSubject并给它一个默认值，比如link1。例如：

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

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

Answer 3

我正在回答我自己的问题，我使用 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);
    });
}

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

Dynamic Routing with tabs in angular2 4

angular

typescript

routing

angular2-routing

angular4-router