Как я могу использовать ui-router во внешней ссылке, например google.com?

Например:

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

            })

url предполагает, что это внутреннее состояние. Я хочу, чтобы это было похоже на href или что-то в этом роде.

У меня есть структура навигации, которая будет строиться с ui-маршрутов, и мне нужна ссылка, чтобы перейти к внешней ссылке. Не обязательно просто Google, это только пример.

Не ищите его в ссылке или как $state.href('http://www.google.com'). Это необходимо декларативно в конфигурациях маршрутов.

Ответы

Ответ 1

Angular -ui-router не поддерживает внешний URL-адрес, вам нужно перенаправить пользователя с помощью $location.url() или $window.open()

Я предлагаю вам использовать $window.open('http://www.google.com', '_self'), который откроет URL-адрес на той же странице.

Обновление

Вы также можете настроить 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');
      }
    });
})

Пример Plunkr

Примечание. Откройте Plunkr в новом окне, чтобы заставить его работать, потому что google doesn ' t открывается в iFrame из-за некоторой причины безопасности.

Ответ 2

Вы можете использовать обратный вызов onEnter:

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

Edit

Основываясь на ответах pankajparkar, как я уже сказал, я думаю, вам следует избегать переопределения существующего имени параметра. ui-router приложил много усилий, чтобы различать состояния и URL-адреса, поэтому использование 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'
});

Ответ 4

Я преобразовал принятый ответ в тот, который предполагает последнюю версию AngularJS (в настоящее время 1,6), ui-router 1.x, Webpack 2 с переводом Babel и плагин ng-annotate для 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>