จะเปลี่ยนเส้นทางไปยัง URL ภายนอกใน Angular2 ได้อย่างไร

วิธีการเปลี่ยนเส้นทางผู้ใช้ไปยัง URL ภายนอกทั้งหมดใน Angular 2 ตัวอย่างเช่นหากฉันต้องการเปลี่ยนเส้นทางผู้ใช้ไปยังเซิร์ฟเวอร์ OAuth2 เพื่อตรวจสอบสิทธิ์ฉันจะทำอย่างไร

Location.go(), Router.navigate()และRouter.navigateByUrl()ไม่เป็นไรสำหรับการส่งผู้ใช้ไปยังส่วนอื่น (เส้นทาง) ภายในแอป Angular 2 แต่ฉันไม่เห็นว่าพวกเขาจะถูกนำไปใช้เพื่อเปลี่ยนเส้นทางไปยังไซต์ภายนอกได้อย่างไร

คุณสามารถใช้สิ่งนี้ -> window.location.href = '...';

สิ่งนี้จะเปลี่ยนหน้าเป็นสิ่งที่คุณต้องการ ..

วิธีเชิงมุมของวิธีที่อธิบายไว้ก่อนหน้านี้คือการนำเข้า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>

ตรวจสอบrepo plateformBrowserสำหรับข้อมูลเพิ่มเติม

วิธีการแก้ปัญหาดังที่เดนนิสสโมเลคกล่าวว่าทำได้ง่าย ตั้งค่าwindow.location.hrefเป็น URL ที่คุณต้องการเปลี่ยนและใช้งานได้

ตัวอย่างเช่นหากคุณมีวิธีนี้ในไฟล์คลาส (คอนโทรลเลอร์) ของคอมโพเนนต์:

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

จากนั้นคุณสามารถเรียกมันได้อย่างง่ายดายเพียง(click)กดปุ่ม (หรืออะไรก็ได้) ในแม่แบบของคุณ:

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

ฉันคิดว่าคุณต้องการà target = "_ blank"ดังนั้นคุณสามารถใช้window.open:

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

หากคุณใช้เบ็ดเสร็จของ OnDestry คุณอาจสนใจใช้สิ่งนี้ก่อนเรียก window.location.href = ...

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

โดยทั่วไปการกำหนดเส้นทางไปยังเส้นทาง (จำลอง) ใด ๆ เพื่อบังคับใช้ hook จากนั้นนำทางตามที่ร้องขอ

ใน Angular รุ่นใหม่กว่าที่มีหน้าต่างเป็น any

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

หลังจากฉีกหัวฉันออกไปทางออกก็แค่เพิ่ม http: // ไปยัง href

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

ฉันใช้ window.location.href = ' http: // external-url ';

สำหรับฉันการเปลี่ยนเส้นทางทำงานใน Chrome แต่ไม่ได้ทำงานใน Firefox รหัสต่อไปนี้แก้ไขปัญหาของฉัน:

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

ฉันใช้ Angular 2 Location เนื่องจากฉันไม่ต้องการจัดการวัตถุหน้าต่างระดับโลกด้วยตนเอง

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

ไม่มีวิธีแก้ปัญหาใดที่ใช้ได้สำหรับฉันฉันเพิ่งเพิ่ม

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

สิ่งนี้ใช้ได้สำหรับฉัน

หรือลองใช้

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

ในส่วนประกอบของคุณ

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

ในcomponent.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;**