Question

我有以下路线。

http：//本地主机：4100 /示例/ 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

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

我最终得到了一些解决方法：从 url 中获取辅助（辅助）路由，并将它们添加到导航功能中。

我只有 one 次要路由叫做 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: 在这种情况下）之后子字符串匹配（所以在这种情况下它只有一个：“）。所以弹出路由的路径在 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 了，你可以使用一个属性。

在成角度的主插座中导航时，保留次要路线

1 个答案: