Question

例如：

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

            })

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

我有一个将从ui-routes构建的导航结构，我需要一个链接转到外部链接。不一定只是谷歌，这只是一个例子。

不在链接或$ state.href（＆＃39; http://www.google.com＆＃39;）中查找。在路由配置中以声明方式需要它。

Answer 1

Angular-ui-router不支持外部网址，您需要使用$location.url()或$window.open()

重定向用户

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

<强>更新

您还可以通过添加参数ui-router来自定义external，它可以是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

注意：在新窗口中打开Plunkr以使其正常工作，因为由于某些安全原因，google未在iFrame中打开。

Answer 2

您可以使用onEnter回调：

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

修改

在pankajparkar的回答基础上，正如我所说，我认为你应该避免重写现有的参数名称。 ui-router投入大量精力来区分状态和网址，因此同时使用url和externalUrl可能有意义......

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

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

使用它，有或没有内部网址：

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

Answer 3

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

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

这将禁用特定所需链接上的angularJS路由。

Answer 4

我将接受的答案转换为假定最新版本的AngularJS（目前为1.6），ui-router 1.x，Webpack 2与Babel转换和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，并且在UI Router中默认为禁用，您可能希望探索使用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转到外部链接，例如google.com？

5 个答案: