google.com 등의 외부 링크로 UI를 이동하려면 어떻게 해야 합니까?

google.com 등의 외부 링크로 UI를 이동하려면 어떻게 해야 합니까?

예를 들어 다음과 같습니다.

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

            })

url은 이것이 내부 상태라고 가정합니다.그런 취지의 href나 뭐 그런 느낌이었으면 좋겠어요.

저는 ui-routes에서 구축되는 네비게이션 구조를 가지고 있으며 외부 링크로 이동하기 위한 링크가 필요합니다.꼭 구글에만 국한된 것이 아니라 단지 하나의 예에 불과합니다.

링크 또는 $state.href(http://www.google.com')에서 검색되지 않습니다.routes config에서 선언적으로 필요합니다.

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');
      }
    });
})

샘플 플런커

주의: 보안상의 이유로 iFrame에서는 Google이 열리지 않기 때문에 새 창에서 Plunkr을 엽니다.

콜백을 사용할 수 있습니다.

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

편집

판카즈파카의 대답에 근거해, 내가 말했듯이, 너는 기존의 파라메타 이름을 무시하지 말아야 한다고 생각해.ui-module은 상태와 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'
});

angular.js link behavior에서 설명한 바와 같이 사용하는 데 필요한 특정 URL에 대한 딥링크를 비활성화합니다.

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

그러면 각도가 비활성화됩니다.특정 목적 링크상의 JS 라우팅.

나는 받아들여진 답변을 최신 버전의 AngularJS(현재 1.6), ui-router 1.x, Babel 환산 기능이 있는 Webpack 2, Babel용 ng-annotate 플러그인을 가정한 것으로 변환했다.

.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>

원래 답변은 UI 라우터에서 권장되지 않으며 기본적으로 비활성화되어 있습니다. 전환 후크를 사용하여 구현하는 방법을 검토할 수 있습니다.

  .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;
  });
}]
);

언급URL : https://stackoverflow.com/questions/30220947/how-would-i-have-ui-router-go-to-an-external-link-such-as-google-com