angular - 在 Angular 主导出中航行时，保留次要路线

Question

我有以下路线。

http: // localhost: 4100 / example / 5b8c94cfc5f85728db8bddf2 / 5bb426434722020c569fc5d8 / (p1: .... // p2: .... // p3: ...)

我有 3 条次要路线
, 我有一个问题，当我执行以下操作时

this.router.navigate ([<any path>], {relativeTo: this.route})

, 我在主导出航行，但是不保留辅助导出 p1、p2、p3

有什么等同于preserveQueryParams 的东西吗？ ，导航附加功能？
https://angular.io/api/router/NavigationExtras
但是对于次要路线？

Answer 1

我也面临同样的问题。不幸的是，此时(仍然)似乎没有现成的解决方案。
我最终做了一些 hacky 工作:从 url 获取辅助(辅助)路由，并将它们添加到导航功能。

我只有o ne二级路由称为弹出，所以我创建了一个正则表达式来获取弹出路由器导出的路径:const POPUP_ROUTE_FROM_URL_REGEX = /\(popup:([^)]+)\)/ .
然后我从 url 得到了路径:const popupRouteResult= POPUP_ROUTE_FROM_URL_REGEX.exec(this.router.url) . (this.router 被注入(inject)到构造函数中: private router: Router 。) exec 函数返回一个数组，其中第一项是正则表达式的完全匹配(所以“(popup: 在这种情况下)和之后子字符串匹配(所以在这种情况下它只有一个:“)。所以弹出路由的路径在 popupRouteResult[1] 中。
在导航功能中，您可以像这样使用它:

this.router.navigate(
    [
        <some path>,
        {
            outlets: {
            // the line below ensures that the (possibly present) popup route is preserved when navigating
                ...(!!popupRouteResult&& { popup: popupRouteResult[1] }),
            },
        },
    ]                
);

如果您有 多条二级路由您可以调整正则表达式以获取括号之间的所有内容:

const SECONDARY_ROUTES_FROM_URL_REGEX = /\(([^)]+)\)/;
const secondaryRoutesResult = SECONDARY_ROUTES_FROM_URL_REGEX .exec(this.router.url);

对于问题 secondaryRoutesResult[1] 中的示例会给你"p1: .... // p2: .... // p3: ..." .
您可以在//上拆分此字符串以获取每个单独的导出路径:const outlets = secondaryRoutesResult[1].split('// ) , which will result in: ["p1: ....", "p2: .... ", "p3"]`。首先检查是否存在 secondaryRoutesResult[1] 是明智的。
然后你可以循环导出:

const outletsData = {outlets: {}};
outlets.forEach(outlet => {
   // split by : to get the name of the outlet and the path separated
   const splitOutlet = outlet.split(":");
   const name = splitOutlet[0];
   const path = splitOutlet[1];
   outletsData[name] = path
});

您可以在导航功能中使用这些数据:

this.router.navigate([<some path>, outletsData]);

希望这个答案能帮助那些偶然发现同样问题的人!我希望能看到 angular 的更新，这样就不再需要这个 hack 了，只有一个属性可以使用。