web-dev-qa-db-ja.com

ui-routerからgoogle.comなどの外部リンクに移動するにはどうすればよいですか？

例えば：

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

            })

urlは、これが内部状態であることを前提としています。私はそれがhrefやその効果のようなものであることを望んでいます。

UIルートから構築するナビゲーション構造があり、外部リンクに移動するためのリンクが必要です。必ずしもグーグルだけでなく、それは単なる例です。

リンクまたは$ state.href（ ' http://www.google.com '）としては探していません。 routes configで宣言的に必要とします。

angularjsroutingangular-ui-routersingle-page-applicationangularjs-routing
25
Shane

Angular-ui-routerは外部URLをサポートしていません。$location.url()または$window.open()を使用してユーザーをリダイレクトする必要があります

同じページでURLを開く$window.open('http://www.google.com', '_self')を使用することをお勧めします。

更新

パラメーター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

注： google は、何らかのセキュリティ上の理由により、iFrameで開きません。

34
Pankaj Parkar

onEnter コールバックを使用できます。

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

編集

Pankajparkarの答えに基づいて、既存のパラメーター名をオーバーライドすることは避けるべきだと私が言ったように。 ui-routerは状態とurlを区別するために多大な努力をしたため、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');
            }
        }
    );
});

そして、内部URLの有無にかかわらず、そのように使用します：

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

angular.jsのリンク動作-特定のURLのディープリンクを無効にする で述べたように、使用するだけです

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

これにより、特定の目的のリンクでのangularJSルーティングが無効になります。

9
Ebrahim

受け入れられた回答を、AngularJSの最新バージョン（現在1.6）、 i-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>
0
Christiaan Westerbeek