Angular2 में बाहरी URL पर पुनर्निर्देशित कैसे करें?

173

उपयोगकर्ता को Angular 2 में पूरी तरह से बाहरी URL पर पुनर्निर्देशित करने की विधि क्या है। उदाहरण के लिए, यदि मुझे प्रमाणित करने के लिए OAuth2 सर्वर पर उपयोगकर्ता को पुनर्निर्देशित करने की आवश्यकता है, तो मैं यह कैसे करूंगा?

Location.go(), Router.navigate()और Router.navigateByUrl()कोणीय 2 ऐप के भीतर उपयोगकर्ता को दूसरे खंड (मार्ग) पर भेजने के लिए ठीक हैं, लेकिन मैं यह नहीं देख सकता कि उन्हें किसी बाहरी साइट पर पुनर्निर्देशित करने के लिए कैसे उपयोग किया जा सकता है?

redirect angular angular2-routing

— माइकल ओरिल
स्रोत

4

क्या आपको यह हास्यास्पद नहीं लगता कि यह आसानी से नहीं होता है? ऐसा करने के लिए एक सरल तरीका होना चाहिए, इसके लिए कोड के बिना।

— मैक्रर्ट

3

नोट: यदि आपके बाहरी URL में http: // या https: // नहीं है, तो कोणीय 4 URL को आंतरिक मार्ग के रूप में मानेगा। मामले में किसी और के साथ संघर्ष कर रहा है।

— AherocalledFrog

214

आप इसका उपयोग कर सकते हैं-> window.location.href = '...';

इससे पृष्ठ को आप जो चाहें बदल सकते हैं।

— डेनिस स्मोलक
स्रोत

3

उह, मैंने इसे केवल मान बदलने के बजाय किसी कारण से फ़ंक्शन के रूप में कॉल करने का प्रयास किया। मान सेट करना सीधे काम करता है।

— माइकल ओरीएल

9

बस याद रखें कि विंडो को सीधे संदर्भित करने से आपके कोड को एक विंडो ऑब्जेक्ट के साथ प्लेटफार्मों तक सीमित कर दिया जाएगा।

— एंडर

2

@ इसके लिए कोई विकल्प नहीं है? ऐसे परिदृश्य हो सकते हैं जहां हम वास्तव में बाहरी लिंक पर पुनर्निर्देशित करना चाहते हैं। ज़रूर, हम window.location.href का उपयोग कर सकते हैं, लेकिन जैसा कि आप कहते हैं, इसके नुकसान हैं। यदि कोणीय में एक समर्थित एपीआई है, तो इससे बेहतर मदद मिलेगी।

— कृष्णन

1

ज़रूर, लेकिन यह उन सभी प्लेटफार्मों का 99% है जो जावास्क्रिप्ट चलाते हैं और पृष्ठ पुनर्निर्देशित करने की आवश्यकता होती है। यहां तक कि प्रेत / कैस्परज विंडो ऑब्जेक्ट का सम्मान करते हैं। आप कॉल document.location.hrefया यहां तक Location.hrefकि वे सभी एक ही वस्तु को संदर्भित कर सकते हैं। स्थान संदर्भ

— डेनिस स्मोलेक

2

@ डेनिसस्मोलेक लेकिन यदि आप इसे यूनिवर्सल का उपयोग करके एंड्रॉइड ऐप में संकलित करने का प्रयास करते हैं, तो क्या यह व्यवहार विफल नहीं होगा?

— Ender

124

पहले वर्णित विधियों के लिए एक कोणीय दृष्टिकोण (या कोणीय <4 में) DOCUMENTसे आयात करना और उपयोग करना है@angular/common@angular/platform-browser

document.location.href = 'https://stackoverflow.com';

एक समारोह के अंदर।

कुछ-page.component.ts

import { DOCUMENT } from '@angular/common';
...
constructor(@Inject(DOCUMENT) private document: Document) { }

goToUrl(): void {
    this.document.location.href = 'https://stackoverflow.com';
}

कुछ-page.component.html

<button type="button" (click)="goToUrl()">Click me!</button>

की जाँच करें plateformBrowser अधिक जानकारी के लिए रेपो।

— ब्रायन
स्रोत

क्या लक्ष्य साइट को पता होगा कि अनुरोध हमारे ऐप से आ रहा है, क्योंकि यहां आवश्यकता लॉगिन उद्देश्य के लिए रीडायरेक्ट करने की है और इसलिए SSO ऐप को सफलता के बाद हमारे ऐप पर वापस भेज देना चाहिए

— NitinSingh

5

कोणीय 4 में, DOCUMENT @angular/common(यानी import { DOCUMENT } from '@angular/common';) से आयात किया जाना चाहिए , लेकिन अन्यथा यह बहुत अच्छा काम करता है! देखिए github.com/angular/angular/blob/master/packages/…

— John

4

इस तरह से दस्तावेज़ को इंजेक्ट करने का उद्देश्य क्या है@Inject(DOCUMENT) private document: any

— सुनील गर्ग

1

@SunilGarg इंजेक्ट DOCUMENTकरने से यूनिट ऑब्जेक्ट्स में दस्तावेज़ ऑब्जेक्ट को मॉक के साथ बदलना आसान हो जाता है। यह अन्य प्लेटफार्मों (सर्वर / मोबाइल) पर उपयोग किए जाने वाले वैकल्पिक कार्यान्वयन के लिए भी अनुमति देता है।

— इप्सिलॉन

3

मेरे द्वारा उपयोग किए जाने वाले सख्त टाइपिंग के लिए,constructor(@Inject(DOCUMENT) private document: Document) { }

— इयान जेमिसन

38

जैसा कि डेनिस स्मोलेक ने कहा, इसका समाधान सरल है। window.location.hrefउस URL पर सेट करें जिसे आप स्विच करना चाहते हैं और यह सिर्फ काम करता है।

उदाहरण के लिए, यदि आपके पास घटक की फ़ाइल (नियंत्रक) में यह विधि है:

goCNN() {
    window.location.href='http://www.cnn.com/';
}

तब आप इसे (click)अपने टेम्पलेट में एक बटन (या जो कुछ भी) पर उचित कॉल के साथ कह सकते हैं:

<button (click)="goCNN()">Go to CNN</button>

— माइकल ओरिल
स्रोत

21

मुझे लगता है कि आपको लक्ष्य चाहिए = "_ blank" , तो आप उपयोग कर सकते हैं window.open:

gotoGoogle() : void {
     window.open("https://www.google.com", "_blank");
}

— abahet
स्रोत

10

यदि आप OnDestry जीवन चक्र हुक का उपयोग कर रहे हैं, तो आप window.location.ref = ... कॉल करने से पहले कुछ इस तरह का उपयोग करने में रुचि हो सकती है ...

    this.router.ngOnDestroy();
    window.location.href = 'http://www.cnn.com/';

यह आपके घटक में OnDestry कॉलबैक को ट्रिगर करेगा जो आपको पसंद आ सकता है।

ओह, और भी:

import { Router } from '@angular/router';

वह जगह है जहाँ आप राउटर पाते हैं।

--- संपादित करें --- अफसोस की बात है, मैं ऊपर के उदाहरण में गलत हो सकता था। कम से कम यह अभी मेरे प्रोडक्शन कोड में एक्सपेक्टेड के रूप में काम नहीं कर रहा है - इसलिए, जब तक मेरे पास आगे की जांच करने का समय नहीं है, मैं इसे इस तरह से हल करता हूं (चूंकि मेरे ऐप को वास्तव में हुक की आवश्यकता होती है)

this.router.navigate(["/"]).then(result=>{window.location.href = 'http://www.cnn.com/';});

मूल रूप से हुक को बाध्य करने के लिए किसी भी (डमी) मार्ग पर रूटिंग करें, और फिर अनुरोध के अनुसार नेविगेट करें।

— हेनरी Arousell
स्रोत

6

एक के रूप में खिड़की के साथ कोणीय के नए संस्करणों में any

(window as any).open(someUrl, "_blank");

— user738048
स्रोत

सबसे अच्छा जवाब

— विक्टर ब्रेडिहिन

क्या कोणीय पर नए संस्करण सिर्फ सादे खिड़की की अनुमति नहीं देते हैं?

— जस्टिन

3

मेरे सिर को चीरने के बाद, समाधान सिर्फ http: // को href में जोड़ने के लिए है।

<a href="http://www.URL.com">Go somewhere</a>

— जोएल
स्रोत

4

आप किस प्रश्न का उत्तर देते हैं?

— गुइडो फ़्लार

2

मैंने window.location.href = ' http: // external-url ' का उपयोग किया;

मेरे लिए रीडायरेक्ट ने क्रोम में काम किया, लेकिन फ़ायरफ़ॉक्स में काम नहीं किया। निम्नलिखित कोड ने मेरी समस्या हल कर दी:

window.location.assign('http://external-url');

— लौरा चेज़
स्रोत

1

मैंने इसे Angular 2 स्थान का उपयोग किया क्योंकि मैं स्वयं वैश्विक विंडो ऑब्जेक्ट में हेरफेर नहीं करना चाहता था।

https://angular.io/docs/ts/latest/api/common/index/Location-class.html#!#prepareExternalUrl-anchor

इसे इस तरह किया जा सकता है:

import {Component} from '@angular/core';
import {Location} from '@angular/common';
@Component({selector: 'app-component'})
class AppCmp {
  constructor(location: Location) {
    location.go('/foo');
  }
}

— user3220080
स्रोत

1

मेरे लिए, यह सिर्फ URL बदलता है और ऐप स्थिति नहीं बदलती (वास्तविक मार्ग समान दिखता है)। यहां तक कि 'location.replaceState (' / ') ने मेरी अपेक्षा के अनुरूप काम नहीं किया। router.navigate(['/']);यह मेरे लिए क्या किया है।

— मैट रॉल्स

2

कोणीय 2 स्थान लागू नहीं होता है। डॉक्स बताता है कि स्थान का उद्देश्य है: "एप्लिकेशन के आधार href के विरुद्ध URL को सामान्य करने के लिए स्थान जिम्मेदार है।" एप्लिकेशन के भीतर एक URL पर पुनर्निर्देशित करने के लिए इसका उपयोग करना उचित हो सकता है; बाहरी URL पर रीडायरेक्ट करने के लिए इसका उपयोग डॉक्स के साथ फिट नहीं लगता है।

— जे। फ्रिट्ज़ बार्न्स

1

उपरोक्त समाधानों में से कोई भी मेरे लिए काम नहीं किया, मैंने अभी जोड़ा

window.location.href = "www.google.com"
event.preventDefault();

इसने मेरे लिए काम किया।

या प्रयोग करके देखें

window.location.replace("www.google.com");

— Rishi0405
स्रोत

0

अपने कंपोनेंट में

import { Component } from '@angular/core';

@Component({
  ...
})
export class AppComponent {
  ...
  goToSpecificUrl(url): void {
    window.location.href=url;
  }

  gotoGoogle() : void {
    window.location.href='https://www.google.com';
  }
}

अपने कंपोनेंट में। html

<button type="button" (click)="goToSpecificUrl('http://stackoverflow.com/')">Open URL</button>
<button type="button" (click)="gotoGoogle()">Open Google</button>

<li *ngFor="item of itemList" (click)="goToSpecificUrl(item.link)"> // (click) don't enable pointer when we hover so we should enable it by using css like: **cursor: pointer;**

— फान वान लिंह
स्रोत