我如何让 ui-router 连接到外部 link，例如 google.com？

Question

例如：

 $stateProvider
            .state('external', {
                url: 'http://www.google.com',

            })

url 假设这是一个内部状态。我希望它像 href 或类似的东西。

我有一个导航结构，可以从 ui-routes uild，我需要一个 link 去外部 link .不一定只是 google，这只是一个例子。

不在 link 或 $state.href('http://www.google.com') 中寻找它。在路由配置中以声明方式需要它。

Answer 1

您可以使用 onEnter 回调：

 $stateProvider
    .state('external', {
        onEnter: function($window) {
            $window.open('http://www.google.com', '_self');
        }
    });

编辑

Building 关于 pankajparkar 的回答，正如我所说，我认为您应该避免覆盖现有的参数名称。 ui-router 花费了大量精力在状态和 url 之间区分 uish，因此同时使用 url 和 externalUrl 可能是有意义的......

所以，我会像这样实现一个 externalUrl 参数：

myApp.run(function($rootScope, $window) {
    $rootScope.$on(
        '$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams) {
            if (toState.externalUrl) {
                event.preventDefault();
                $window.open(toState.externalUrl, '_self');
            }
        }
    );
});

并像这样使用它，有或没有内部 url:

$stateProvider.state('external', {
    // option url for sref
    // url: '/to-google',
    externalUrl: 'http://www.google.com'
});

Answer 2

Angular-ui-路由器不支持外部 URL，您需要使用 $location.url() 或 $window.open()[=22 重定向用户=]

我建议您使用 $window.open('http://www.google.com', '_self')，它将在同一页面上打开 URL。

更新

你也可以通过添加参数external自定义ui-router，可以是true/false.

  $stateProvider
  .state('external', {
       url: 'http://www.google.com',
       external: true
  })

然后在您的状态中配置 $stateChangeStart 并在那里处理重定向部分。

运行块

myapp.run(function($rootScope, $window) {
  $rootScope.$on('$stateChangeStart',
    function(event, toState, toParams, fromState, fromParams) {
      if (toState.external) {
        event.preventDefault();
        $window.open(toState.url, '_self');
      }
    });
})

Sample Plunkr

Note: Open Plunkr in a new window in order to make it working, because google doesn't get open in iFrame due to some security reason.

Answer 3

如angular.js link behaviour - disable deep linking for specific URLs所述你只需要使用

<a href="newlink" target="_self">link to external</a>

这将在特定的 link 上禁用 angularJS 路由。

Answer 4

我将已接受的答案转换为假设最新版本 AngularJS（当前为 1.6），ui-router 1.x, Webpack 2 with Babel transpilation and the ng-annotate plugin for Babel。

.run(($transitions, $window) => {
  'ngInject'
  $transitions.onStart({
    to: (state) => state.external === true && state.url
  }, ($transition) => {
    const to = $transition.to()
    $window.open(to.url, to.target || '_self')
    return false
  })
})

状态的配置方式如下：

.config(($stateProvider) => {
  'ngInject'
  $stateProvider
    .state({
      name: 'there',
      url:'https://google.com',
      external: true,
      target: '_blank'
    })
})

用法：

<a ui-sref="there">To Google</a>

Answer 5

原答案是deprecated and disabled by default in UI Router, you may wish to explore implementing it using transition hooks

  .state("mystate", {
    externalUrl: 'https://google.com'
  })

然后：

myApp.run(['$transitions', '$window', ($transitions, $window) => {
  $transitions.onEnter({}, function (transition) {
    const toState = transition.to();

    if (toState.externalUrl) {
      $window.open(toState.externalUrl, '_self');
      return false;
    }
    return true;
  });
}]
);

我如何让 ui-router 连接到外部 link，例如 google.com？

How would I have ui-router go to an external link, such as google.com?

routing

angularjs

single-page-application

angularjs-routing

angular-ui-router