Angular2 এ কীভাবে কোনও বাহ্যিক URL এ পুনঃনির্দেশ করবেন?

Question

কৌণিক 2 এ সম্পূর্ণরূপে বাহ্যিক URL- এ ব্যবহারকারীকে পুনর্নির্দেশের কী পদ্ধতিটি উদাহরণস্বরূপ, প্রমাণীকরণের জন্য যদি আমাকে ব্যবহারকারীকে OAuth2 সার্ভারে পুনর্নির্দেশের প্রয়োজন হয় তবে আমি কীভাবে এটি করব?

Location.go(), Router.navigate()এবং Router.navigateByUrl()এঙ্গুলার 2 অ্যাপের মধ্যে ব্যবহারকারীকে অন্য বিভাগে (রুট) প্রেরণের জন্য ভাল, তবে আমি দেখতে পাচ্ছি না যে কীভাবে তারা কোনও বাহ্যিক সাইটে পুনঃনির্দেশিত করতে ব্যবহৃত হতে পারে?

Comments

আপনি কি হাস্যকর মনে করেন না যে এটি সহজে করা হয় না? এটির জন্য কোড না করেই এটি করার একটি সহজ উপায় থাকতে হবে।

— ম্যাককার্ট

দ্রষ্টব্য: যদি আপনার বাহ্যিক ইউআরএলটিতে http: // বা https: // না থাকে তবে কৌণিক 4 URL টি একটি অভ্যন্তরীণ রুট হিসাবে বিবেচনা করবে। যদি অন্য কেউ এর সাথে লড়াই করে চলেছে।

— অ্যারোক্ল্যাডফ্রোগ 20

Answer 1

আপনি এটি-> ব্যবহার করতে পারেন window.location.href = '...';

এটি পৃষ্ঠায় আপনি যা চান পরিবর্তন করবে ..

Comments

ওহ, আমি কোনও কারণ হিসাবে এটি কেবল মান পরিবর্তন না করে এটি একটি ফাংশন হিসাবে কল করার চেষ্টা করেছি। মান নির্ধারণ সরাসরি কাজ করে।

— মাইকেল অরিল

কেবল মনে রাখবেন যে উইন্ডোটিকে সরাসরি উল্লেখ করা আপনার কোডটিকে উইন্ডো অবজেক্টের সাথে প্ল্যাটফর্মগুলিতে সীমাবদ্ধ করবে।

— সমাপ্তি

@ জেনার এর বিকল্প নেই? এমন পরিস্থিতিতে থাকতে পারে যেখানে আমরা সত্যই বাহ্যিক লিঙ্কগুলিতে পুনর্নির্দেশ করতে চাই। অবশ্যই, আমরা উইন্ডো.লোকেশন.ইরেফ ব্যবহার করতে পারি, তবে আপনি যা বলছেন, এর অসুবিধাও রয়েছে। অ্যাঙ্গুলারটিতে যদি কোনও সমর্থিত এপিআই থাকে তবে এটি আরও ভালভাবে সহায়তা করবে।

— কৃষ্ণন

অবশ্যই, তবে এটি সেই সমস্ত প্ল্যাটফর্মগুলির মধ্যে 99% যা জাভাস্ক্রিপ্ট চালায় এবং একটি পৃষ্ঠা পুনর্নির্দেশ করতে হবে। এমনকি ফ্যান্টম / ক্যাস্পার জেগুলি উইন্ডো অবজেক্টকে সম্মান করে। আপনি কল করতে পারেন document.location.hrefবা এমনকি Location.hrefতারা সবাই একই বস্তুর উল্লেখ করেছেন। অবস্থানের রেফারেন্স

— ডেনিস স্মোলেক

@ ডেনিসস্মোলেক তবে আপনি যদি ইউনিভার্সাল ব্যবহার করে এটিকে একটি অ্যান্ড্রয়েড অ্যাপে সংকলন করার চেষ্টা করেন তবে এই আচরণটি ব্যর্থ হবে না?

— সমাপ্তি

Answer 2

পূর্বে বর্ণিত পদ্ধতিগুলির একটি কৌণিক দৃষ্টিভঙ্গি হ'ল আমদানি DOCUMENTকরা @angular/common(বা @angular/platform-browserকৌণিক <4 এ) এবং ব্যবহার

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 আরও তথ্যের জন্য রেপো।

Comments

টার্গেট সাইটটি কী জানতে পারে যে অনুরোধটি আমাদের অ্যাপ থেকে আসছে, যেহেতু এখানে প্রয়োজনীয়তা লগইন উদ্দেশ্যে পুনর্নির্দেশ করা এবং তাই এসএসও অ্যাপ্লিকেশনটি সাফল্যের পরে আমাদের অ্যাপে ফিরে যেতে হবে

— নিতিনসিংহ

কৌণিক 4 এ, ডকুমেন্টটি @angular/common(অর্থাত্ import { DOCUMENT } from '@angular/common';) থেকে আমদানি করা উচিত , তবে অন্যথায় এটি দুর্দান্ত কাজ করে! Github.com/angular/angular/blob/master/packages/…

— জন

এইভাবে নথিটি ইনজেকশনের উদ্দেশ্য কী@Inject(DOCUMENT) private document: any

— সুনীল গার্গ

@ সুনিলগার্গ ইনজেকশনটি DOCUMENTইউনিট পরীক্ষাগুলিতে মক দিয়ে দস্তাবেজ অবজেক্টটি প্রতিস্থাপন করা সহজ করে তোলে। এটি অন্য প্ল্যাটফর্মগুলিতে (সার্ভার / মোবাইল) বিকল্প বিকল্প ব্যবহারের অনুমতি দেয়।

— এপসিলন

কঠোর টাইপিংয়ের জন্য আমি ব্যবহার করিconstructor(@Inject(DOCUMENT) private document: Document) { }

— আইয়ান জেমিসন

Answer 3

সমাধান , যেমন ডেনিস Smolek বললেন, মৃত সহজ। window.location.hrefআপনি যে ইউআরএল এ যেতে চান তাতে সেট করুন এবং এটি ঠিক কাজ করে।

উদাহরণস্বরূপ, আপনার উপাদানগুলির শ্রেণি ফাইলটিতে যদি এই পদ্ধতিটি থাকে (নিয়ন্ত্রণকারী):

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

তারপরে আপনি (click)আপনার টেমপ্লেটে একটি বোতামে (বা যাই হোক না কেন) উপযুক্ত কল দিয়ে একে একে সহজেই কল করতে পারেন :

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

Answer 4

আমি মনে করি আপনার à লক্ষ্য = "_ ফাঁকা" দরকার , তাই আপনি ব্যবহার করতে পারেন window.open:

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

Answer 5

আপনি যদি অনডেস্ট্রি লাইফাইসাইকেল হুক ব্যবহার করে থাকেন তবে আপনার উইন্ডো.লোকেশন এইচআরএফ = কল করার আগে এই জাতীয় কিছু ব্যবহার করতে আগ্রহী হতে পারেন ...

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

এটি আপনাকে পছন্দ করতে পারে এমন উপাদানগুলিতে অনডেস্ট্রি কলব্যাককে ট্রিগার করবে।

ওহ, এবং এছাড়াও:

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

আপনি রাউটার খুঁজে যেখানে।

--- সম্পাদনা --- দুঃখের বিষয়, উপরের উদাহরণে আমার ভুল হতে পারে। কমপক্ষে এটি এখনই আমার প্রোডাকশন কোডে এক্সপেক্টেড হিসাবে কাজ করছে না - সুতরাং, যতক্ষণ আমার আরও তদন্ত করার সময় না পাওয়া পর্যন্ত আমি এটিকে এটি সমাধান করি (যেহেতু আমার অ্যাপ্লিকেশনটি সত্যই সম্ভব হলে হুক দরকার)

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

মূলত হুককে জোর করার জন্য যে কোনও (ডামি) রুটে যাত্রা করা, এবং তারপরে অনুরোধ অনুসারে নেভিগেট করুন।

Answer 6

উইন্ডো হিসাবে একটি হিসাবে কৌণিক এর নতুন সংস্করণে any

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

Comments

সেরা উত্তর

— ভিক্টর ব্রেদিহিন

কৌণিকের নতুন সংস্করণগুলি কি কেবল সরল উইন্ডোকেই অনুমতি দেয় না?

— জাস্টিন

Answer 7

আমার মাথাটি ছিঁড়ে ফেলার পরে সমাধানটি হ'ল href- তে কেবল http: // যুক্ত করা।

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

Comments

আপনি কি প্রশ্নের সাথে উত্তর দিন?

— গুইডো ফ্লাহার

Answer 8

আমি window.location.href = ' http: // বহিরঙ্গন-url ' ব্যবহার করেছি;

আমার জন্য পুনর্নির্দেশগুলি ক্রোমে কাজ করেছিল তবে ফায়ারফক্সে কাজ করেনি। নিম্নলিখিত কোডটি আমার সমস্যার সমাধান করেছে:

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

Answer 9

আমি এঙ্গুলার 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');
  }
}

Comments

আমার জন্য, এটি কেবল URL পরিবর্তন করে এবং অ্যাপের স্থিতি পরিবর্তন হয় না (প্রকৃত রুটটি একই দেখায়) looks এমনকি 'অবস্থান.replaceState (' / ') আমার প্রত্যাশার মতো কাজ করে নি। router.navigate(['/']);এটা আমার জন্য কি করেছে।

— ম্যাট রোলস

কৌণিক 2 অবস্থান প্রযোজ্য বলে মনে হয় না। দস্তাবেজগুলি উল্লেখ করে যে অবস্থানটির উদ্দেশ্য: "অ্যাপ্লিকেশনটির বেস href এর বিরুদ্ধে URL টি স্বাভাবিক করার জন্য অবস্থান দায়বদ্ধ" " অ্যাপ্লিকেশনটির মধ্যে কোনও URL এ পুনঃনির্দেশ করতে এটি ব্যবহার করা উপযুক্ত হতে পারে; এটি কোনও বাহ্যিক URL এ পুনঃনির্দেশ করতে ব্যবহার করা ডক্সের সাথে খাপ খায় না বলে মনে হয়।

— বার্নেস

Answer 10

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি, আমি কেবল যুক্ত করেছি

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

এটি আমার পক্ষে কাজ করেছে।

বা ব্যবহার করার চেষ্টা করুন

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

Answer 11

আপনার উপাদান

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;**