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




angular2-routing (8)

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

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


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

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://.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;**

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

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


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

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

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

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

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

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

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

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

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

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

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

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

यदि आप 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/';});

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


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

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




angular2-routing