Làm cách nào để chuyển hướng đến URL bên ngoài từ tuyến đường angular2 mà không sử dụng thành phần?

Question

Tôi muốn tạo một chuyển hướng bên ngoài, nhưng để làm cho tất cả các tuyến phù hợp, tôi nghĩ sẽ tốt hơn nếu làm mọi thứ (bao gồm chuyển hướng bên ngoài) trong cấu hình Bộ định tuyến.

vậy:

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent}, 
    {path: 'first', component: FirstComponent}, 
    {path: 'second', component: SecondComponent}, 
    {path: 'external-link', /*would like to have redirect here*/}  
]; 

UPD: và Tôi không muốn sử dụng phần trống cho trường hợp này như @koningdavid gợi ý. Giải pháp này trông thực sự kỳ lạ đối với tôi. Nó phải là một cái gì đó thực sự dễ dàng để thực hiện cho trường hợp như vậy, không có các thành phần ảo.

Answer 1

Theo tôi biết, bộ định tuyến NG2 không hỗ trợ chuyển hướng bên ngoài. Bạn có thể tạo thành phần chuyển hướng dưới dạng giải pháp thay thế.

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

@Component({ 
    selector: 'redirect', 
    template: 'redirecting...' 
}) 
export class RedirectComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { 
    window.location.href = 'http://www.redirecturl.com' 
    } 
} 

Và sử dụng trong định tuyến của bạn

{ path: 'login', component: RedirectComponent, pathmath: 'full'}, 

Answer 2

Hmm ...

Tôi nghĩ rằng bạn chỉ có thể yêu cầu URL thay vì gọi ng2 Router ...

---

Ví dụ:

<a href="http://example.com">External</a> 

thay vì

<a routerLink="/someRoute" routerLinkActive="active">External</a> 

HOẶC

window.location.href = 'http://www.example.com' 

thay vì

this.router.navigate([ '/someRoute', 'someParam' ]); 

---

phải ...?

Answer 3

Bộ định tuyến không thể chuyển hướng ra bên ngoài. Tài nguyên bên ngoài không thể là trạng thái của ứng dụng.

Nếu chỉ để làm rõ, giữ tất cả các tuyến hiển thị tại một điểm, bạn có thể xác định một mảng không đổi khác với tất cả các đường dẫn bên ngoài trong cùng một tệp với các tuyến.

Answer 4

Bạn có thể đạt được những gì bạn muốn bằng một mẹo sử dụng tùy chọn giải quyết của tuyến đường. Giải quyết là một số giá trị dữ liệu mà Angular2 sẽ nhận được cho tuyến đường được khởi tạo. Chi tiết bạn có thể tìm thấy here trong tài liệu chính thức.

Tôi đã thử cách tiếp cận này và nó hoạt động.Ví dụ:

Thêm phần này vào phần cung cấp dịch vụ (cộng với nhập khẩu các lớp cần thiết từ Routing)

@NgModule({ 
    providers: [ 
     { 
      provide: 'externalUrlRedirectResolver', 
      useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => 
      { 
       window.location.href = (route.data as any).externalUrl; 
      } 
     } 
    ] 
}) 

Sau đó, bạn có thể xác định lộ trình của bạn như thế này:

{ 
     path: 'test', 
     component: AnyRandomComponent, 
     resolve: { 
      url: 'externalUrlRedirectResolver' 
     }, 
     data: { 
      externalUrl: 'http://www.google.com' 
     } 
    } 

này sẽ chuyển hướng đến bên ngoài URL. Đó là một chút của một cách hackish thực sự. Tôi đã cố gắng đạt được kết quả mà không cần sử dụng thành phần nào cả, nhưng bạn phải sử dụng hoặc redirectTo hoặc component hoặc children hoặc loadChildren. redirectTo sẽ không kích hoạt quyết tâm và tôi không chắc chắn về trẻ em, mặc dù bạn có thể thử nghiệm.

Bạn có thể triển khai nó trong một lớp học tốt hơn là chức năng trực tiếp trong nhà cung cấp. Thông tin thêm trong tài liệu (xem tham khảo ở trên).

P.S. Tôi thực sự sẽ sử dụng một thành phần chuyển hướng bản thân mình, tôi nghĩ. Chỉ cần sử dụng thủ thuật với dữ liệu và nhận trạng thái từ bộ định tuyến với externalUrl để lấy thông số này làm tham số.

Answer 5

tôi giả sử bạn không muốn tạo ra một thành phần cho mỗi url duy nhất, đó là lý do tại sao bạn đang tìm kiếm để làm điều đó mà không có một thành phần ...

Vì vậy, bạn có thể cố gắng tạo ra một chức năng mà tạo ra các đối tượng thành phần cho bạn ...

Ví dụ ...

function generateLinkingComponent(url) { 
    // Generate your component using koningdavid's code 
    // replace 'http://www.redirecturl.com' with url param 
    // and return it... 
} 

Và thêm nó như thế này trong cấu hình router của bạn ...

const appRoutes: Routes = [ 
    {path: '', component: HomeComponent}, 
    {path: 'first', component: FirstComponent}, 
    {path: 'second', component: SecondComponent}, 
    {path: 'external-link', component: generateLinkingComponent('http://example.com')}, 
    {path: 'client-login', component: generateLinkingComponent('http://client-login.example.com')}, 
    {path: 'admin-login', component: generateLinkingComponent('http://admin.example.com')}, 
]; 

này sẽ dễ dàng với JS ... nhưng không chắc chắn làm thế nào ai có thể trở lại một lớp trong một hàm trong nguyên cảo ...

Hy vọng rằng sẽ giúp ...

Answer 6

Kết thúc câu trả lời Ilya của:

Thêm mô-đun này.

import { Component, Injectable, NgModule } from '@angular/core'; 
import { ActivatedRouteSnapshot, Resolve } from '@angular/router'; 

@Component({ 
    template: '' 
}) 
class ExternalLinkComponent { 
    constructor() { 
    } 
} 

@Injectable() 
class ExternalLinkResolver implements Resolve<any> { 
    resolve(route: ActivatedRouteSnapshot): any { 
    window.location.href = route.data.targetUri; 
    return true; 
    } 
} 

export class ExternalRoute { 
    data: { 
    targetUri: string; 
    }; 
    path: string; 
    pathMatch = 'full'; 
    resolve = { link: ExternalLinkResolver }; 
    component = ExternalLinkComponent; 

    constructor(path: string, targetUri: string) { 
    this.path = path; 
    this.data = { targetUri: targetUri }; 
    } 

} 

@NgModule({ 
    providers: [ ExternalLinkResolver ], 
    declarations: [ExternalLinkComponent] 
}) 
export class ExternalRoutesModule { } 

Sau đó, nhập ExternalRoutesModule và thêm phiên bản ExternalRoute.

const childRoutes: Routes = [ 
    new ExternalRoute('', '/settings/account'), 
    { path: 'staff-profiles', component: StaffProfilesComponent}, 
    { path: 'staff-assignments', component: StaffAssignmentsComponent} 
]; 

const routes: Routes = [ 
    { path: '', component: BaseComponent, children: childRoutes } 
]; 

@NgModule({ 
    imports: [ ExternalRoutesModule, RouterModule.forChild(routes) ], 
    exports: [ RouterModule ] 
}) 
export class SettingsRoutingModule { } 

Lưu ý Tôi đang gắn các tuyến con đường con thông qua tảiChildren trong ví dụ này.