Angular2'de harici bir URL'ye nasıl yeniden yönlendirilir?

Açısal 2'de kullanıcıyı tamamen harici bir URL'ye yönlendirmenin yöntemi nedir? Örneğin, kimlik doğrulaması için kullanıcıyı bir OAuth2 sunucusuna yönlendirmem gerekirse, bunu nasıl yapabilirim?

Location.go(),, Router.navigate()ve Router.navigateByUrl()kullanıcıyı Açısal 2 uygulaması içindeki başka bir bölüme (rotaya) göndermek için iyidir, ancak harici bir siteye yönlendirmek için nasıl kullanılabileceğini göremiyorum?

Bunu kullanabilirsiniz-> window.location.href = '...';

Bu, sayfayı istediğiniz gibi değiştirir.

Daha önce açıklanan yöntemlere açısal yaklaşım DOCUMENT, @angular/common(veya @angular/platform-browserAçısal <4'ten) içe aktarmak ve kullanmaktır.

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

bir işlev içinde.

Bazı-page.component.ts

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

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

Bazı-page.component.html

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

Check out plateformBrowser fazla bilgi için repo.

Dennis Smolek'in dediği gibi çözüm çok basit. Geçmek window.location.hrefistediğiniz URL'ye ayarlayın ve bu sadece çalışır.

Örneğin, bileşeninizin sınıf dosyasında (denetleyici) bu yöntem varsa:

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

Ardından (click), şablonunuzdaki bir düğme (veya herhangi bir şey) üzerindeki uygun çağrı ile oldukça basit bir şekilde arayabilirsiniz:

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

Bence à target = "_ blank" gerekir , böylece kullanabilirsiniz window.open:

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

OnDestry yaşam döngüsü kancasını kullanıyorsanız, window.location.href = ... öğesini çağırmadan önce böyle bir şey kullanmak isteyebilirsiniz.

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

bileşeninizde beğenebileceğiniz OnDestry geri aramasını tetikler.

Ohh ve ayrıca:

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

yönlendiriciyi bulduğunuz yerdir.

--- EDIT --- Ne yazık ki, yukarıdaki örnekte yanılmış olabilirim. En azından şu anda üretim kodumda beklendiği gibi çalışmıyor - bu yüzden, daha fazla araştırmak için zamanım olana kadar, bunu çözdüm (uygulamam mümkün olduğunda kancaya gerçekten ihtiyaç duyduğundan)

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

Temelde kancayı zorlamak için herhangi bir (kukla) rotaya yönlendirme ve ardından istendiği gibi gezinin.

pencereli Angular'ın yeni sürümlerinde any

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

Kafamı söktükten sonra, çözüm href'e http: // eklemektir.

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

Window.location.href = ' http: // external-url ' kullandım;

Benim için yönlendirmeler Chrome'da çalıştı, ancak Firefox'ta çalışmadı. Aşağıdaki kod sorunumu çözdü:

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

Genel pencere nesnesini kendim manipüle etmek istemediğim için Açısal 2 Konumu kullanarak yaptım.

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

Bu şekilde yapılabilir:

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

Yukarıdaki çözümlerin hiçbiri benim için çalışmadı, yeni ekledim

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

Bu benim için çalıştı.

Veya kullanmayı deneyin

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

Senin içinde component.ts

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

Senin içinde 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;**