UI-Router：参数如何映射到 url答案

【问题标题】：UI-Router: how does the params map to the urlUI-Router：参数如何映射到 url
【发布时间】：2020-08-29 19:29:25
【问题描述】：

我是 Angular 和 UI-Router 的新手，我必须使用 Angular 代码库。我很难理解 params 如何映射到 url。具体来说，topics 如何在/test?topic&manualMode&advancedMode 中注入topic 我似乎找不到可以注销中间值以查看url是如何构造的地方。

function StateConfig(
  $stateProvider: angular.ui.IStateProvider,
  breadcrumbsService: BreadcrumbsService
) {
  $stateProvider.state("testHub", {
    params: {
      topics: null
    },

    url: "/test?topic&manualMode&advancedMode",

    views: {
      main: {
        template:
          '<div class="hubContent"><iot-mqtt-client-config></iot-mqtt-client-config></div>'
      },

      sidebar: {
        controller: HelpControllerTutorial,

        controllerAs: "vm",

        templateUrl: "pages/mqtt/mqtt-client-help.html"
      }
    }
  });

  breadcrumbsService.addConfig("testHub", {
    name: (i18n: I18nService) => i18n("text.test"),

    parentState: null,

    reconstructBreadcrumbPath: true
  });
}

【问题讨论】：

标签： javascript angularjs angular-ui-router

【解决方案1】：

这应该适用于 app.js：

.state('testHub', {
    url: "/test/:topic/:manualMode/:advancedMode", // added for dynamic ID params
})

然后你在 materials.html 中的 ui-sref 会将 ( topic 或 manualMode 或 advancedMode ) 附加到 url，你将能够在 $stateParams 中的控制器中访问它

【讨论】：