如何在 Angular 中一致地获取延迟加载模块的根路由？

Question

我有一个延迟加载模块，我想在其中始终触发相对于模块根的导航。

但是我找不到一种方法来一致地找到模块的根路径。也就是说，如果我的lazy Load模块是这样配置的：

{
        path: 'my/path/:id',
        loadChildren: () => import('@lib/my-module').then((m) => m.MyModule)

我想要得到像

my/path/20

这样的东西，所以我总是控制相对于该路径的模块内部路线导航。

这可能吗？

编辑：

即使我处于

my/path/20

等状态，我也想获得

my/path/20/children-1/subchildren

。

Answer 1

有点晚了，但可能对某人有帮助......

如果您想在延迟加载模块自己的路径中进行内部导航，那么您可以考虑使用相对路径而不是绝对路径。这样您就不需要知道延迟加载模块附加到的路径。

以下是如何使用相对路径进行导航的一些示例：

从此路径

my/path/20/children-1/subchildren

您可以转到父路径

my/path/20/children-1

，如下所示：

constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

go() {
    this.router.navigate(['..'], { relativeTo: this.activatedRoute });
}

当从附加到特定路径的组件完成导航时，只需在路由配置文件中进行计数即可轻松确定需要上升的级别。

当您需要导航到某个路径，但导航可以从不同的路径发起时，例如：在不同组件中使用的指令中，需要进行一些计算来确定根（惰性模块根）的级别数。

例如，从这条路径

my/path/20/children-1/subchildren

你可以像这样转到

my/path/20/children-2/subchild

：

go() {
    const levelsToRoot = new Array(this.route.snapshot.url.length).fill('..').join('/') || '.'; // gives '../..' in the current case
    this.router.navigate([levelsToRoot, 'children-2', 'subchild'], {relativeTo: this.activatedRoute });
}