我想创建一个外部重定向，但为了使所有路由保持一致，我认为在路由器状态配置下执行所有操作（包括外部重定向）会很好。
所以：
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建议的那样在这种情况下使用空组件。这个解决方案对我来说看起来很奇怪。对于这种情况，没有虚拟组件，它应该很容易实现。
您可以使用路由的解析选项通过技巧来实现您想要的。Resolve 是 Angular2 将为要初始化的路由获取的一些数据值。更多详细信息，你可以找到这里的官方文档。
我已经尝试过这种方法，它确实有效。例子：
将此添加到提供程序部分（加上从路由导入所需的类）
@NgModule({
providers: [
{
provide: 'externalUrlRedirectResolver',
useValue: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
{
window.location.href = (route.data as any).externalUrl;
}
}
]
})
然后你可以像这样定义你的路线：
{
path: 'test',
component: AnyRandomComponent,
resolve: {
url: 'externalUrlRedirectResolver'
},
data: {
externalUrl: 'http://www.google.com'
}
}
这将重定向到外部 URL。这确实有点像黑客的方式。我试图在不使用组件的情况下实现结果，但您必须使用redirectToorcomponent或childrenor loadChildren。redirectTo不会触发决心，我不确定孩子们，但你可以尝试。
您可以在一个不错的类中实现它，而不是在提供程序中直接实现。文档中的更多信息（参见上面的参考）。
PS 我真的宁愿自己使用重定向组件。只需使用数据的技巧并从路由器获取状态externalUrl即可将其作为参数。
您可以创建一个 RedirectGuard：
import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot} from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class RedirectGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
window.location.href = route.data['externalUrl'];
return true;
}
}
在 app.module 中导入：
providers: [RedirectGuard],
并定义您的路线：
{
path: 'youtube',
canActivate: [RedirectGuard],
component: RedirectGuard,
data: {
externalUrl: 'https://www.youtube.com/'
}
}
据我所知，NG2 路由器不支持外部重定向。您可以创建重定向组件作为解决方法。
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'
}
}
并在您的路由中使用它
{ path: 'login', component: RedirectComponent, pathmath: 'full'},
唔...
我认为您可以简单地请求 URL 而不是调用 ng2 路由器...
例如...
<a href="http://example.com">External</a>
代替
<a routerLink="/someRoute" routerLinkActive="active">External</a>
或者
window.location.href = 'http://www.example.com'
代替
this.router.navigate( [ '/someRoute', 'someParam' ] );
对...？
路由器无法从外部重定向。外部资源不能是应用程序的状态。
如果只是为了清楚起见，将所有路由保持在一个位置可见，您可以定义另一个常量数组，其中包含与路由相同的文件中的所有外部路径。