如何在不使用组件的情况下从angular2路由重定向到外部URL? [英] How to redirect to an external URL from angular2 route without using component?

问题描述

我想创建一个外部重定向，但是为了使所有路由保持一致，我认为在路由器状态配置下进行所有操作(包括外部重定向)会很好.

I would like to create an external redirect, but to make all routes consistent I think it would be nice to do everything(including external redirects) under Router States configuration.

如此:

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

UPD :和在这种情况下，我不想使用空组件，例如建议使用 @koningdavid .这个解决方案对我来说真的很奇怪.在没有虚拟组件的情况下，这种情况下应该很容易实现.

UPD: and I don't want to use empty component for this case like @koningdavid suggested. This solution looks really weird for me. It should be something really easy to implement for such case, without virtual components.

推荐答案

您可以使用路由的resolve选项通过技巧来实现所需的目标.解析是Angular2将为要初始化的路由获取的一些数据值.更多详细信息，您可以在官方此处中找到文档.

You can achieve what you want with a trick using the resolve option of a route. Resolve is some data value that Angular2 will obtain for the route to be initialized. More details you can find here in the official documentation.

我已经尝试过这种方法，并且确实有效.示例:

I have tried this approach and it does work. Example:

将此添加到提供者部分(以及从路由"中导入所需的类)

Add this to the provider section (plus import the required classes from Routing)

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

然后，您可以像这样定义路线:

Then you can define your route like this:

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

这将重定向到外部URL.确实这是一种骇人听闻的方式.我尝试完全不使用组件来获得结果，但是您必须使用redirectTo或component或children或loadChildren. redirectTo不会触发解决方案，尽管您可以尝试，但我不确定孩子的情况.

This will redirect to the external URL. It's a bit of a hackish way really. I tried to achieve the result without using the component at all, but you have to use either redirectTo or component or children or loadChildren. redirectTo won't trigger the resolve and I am not sure about children, though you can experiment.

您可以在一个不错的类中实现它，而不是在provider中使用直接函数.文档中有更多信息(请参阅上面的参考).

You can implement it in a nice class rather than direct function in provider. More info in the documentation (see reference above).

P.S.我想我自己宁愿使用重定向组件.只需对数据使用技巧，并使用externalUrl从路由器获取状态即可将其作为参数.

P.S. I would really rather use a redirect component myself I think. Just use the trick with the data and getting the state from the router with externalUrl to get this as a parameter.

这篇关于如何在不使用组件的情况下从angular2路由重定向到外部URL?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！