在有角度的主出口航行时，保留次要路线

Question

我有以下路线。

http://localhost:4100/示例/5b8c94cfc5f85728db8bddf2/5bb426434722020c569fc5d8/(p1：.... // p2：.... // p3：...)

我有 3 条辅助路线，当我执行以下操作时遇到问题

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

，我在主出口航行，但次要出口 p1、p2、p3 未保留

有没有等于preserveQueryParams的东西？，navigationExtras？ https://angular.io/api/router/NavigationExtras 但对于辅助路线？

Answer 1

我也面临着同样的问题。不幸的是，目前（仍然）似乎还没有现成的解决方案。

我最终做了一些棘手的工作：从 url 获取辅助（辅助）路由，并将它们添加到导航功能中。

我只有一个名为 popup 的辅助路由，因此我创建了一个正则表达式来获取弹出路由器出口的路径： const POPUP_ROUTE_FROM_URL_REGEX = /\(popup:([^)]+)\)/。

然后我从 url 获取路径：const popupRouteResult= POPUP_ROUTE_FROM_URL_REGEX.exec(this.router.url)。（this.router 被注入到构造函数中： private router: Router。） exec 函数返回一个数组，其中第一项是正则表达式的完全匹配（因此在本例中为“(popup:<path...>”），之后是子字符串匹配（因此在本例中只有一个：“<path...>）。因此弹出路由的路径位于 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] 是否存在可能是明智的。

然后你可以循环outlet：

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，并且只有一个属性可以使用。