Angular 5中如何路由到外部链接？

嘿，我明白你作为Angular新手的困惑——Angular的Router模块主要是用来处理应用内部的路由跳转，确实没法直接在Routes数组里配置外部链接。不过有几种简单的方法能实现这个需求，我给你详细说说：

方法1：直接使用HTML原生<a>标签（最简单） #

如果你的外部链接是静态的，直接在模板里用普通的<a>标签就行，不需要依赖Angular Router：

<!-- 在模板文件中 -->
<a href="https://your-external-url.com" target="_blank">打开外部链接</a>

• target="_blank"会在新窗口打开链接，如果你想在当前窗口打开，去掉这个属性即可。

方法2：通过组件类代码触发跳转 #

如果需要在逻辑判断后再跳转外部链接（比如点击按钮后跳转），可以在组件类里用window对象实现：

// 在组件类文件中
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponentComponent {
  goToExternalSite() {
    // 当前窗口跳转
    window.location.href = 'https://your-external-url.com';
    
    // 或者在新窗口打开
    // window.open('https://your-external-url.com', '_blank');
  }
}

然后在模板里绑定点击事件：

<button (click)="goToExternalSite()">跳转到外部网站</button>

方法3：通过路由配置间接跳转（适合统一路由管理场景） #

如果你希望把外部链接也纳入Angular的路由配置体系（比如和内部路由统一管理），可以创建一个专门负责跳转的空组件：

第一步：创建跳转组件 #

// external-redirect.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '' // 不需要显示任何内容
})
export class ExternalRedirectComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // 从路由的data属性中获取外部链接地址
    const externalUrl = this.route.snapshot.data['externalUrl'];
    window.location.href = externalUrl;
  }
}

第二步：在路由配置中添加规则 #

修改你的路由配置文件，把这个跳转组件和外部链接关联起来：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PageComponent } from './page/page.component';
import { ExternalRedirectComponent } from './external-redirect/external-redirect.component';

const appRoutes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: PageComponent, data: { page: 'home' }},
  {path: 'about', component: PageComponent, data: { page: 'about' }},
  // 新增外部跳转路由
  {
    path: 'external-site',
    component: ExternalRedirectComponent,
    data: { externalUrl: 'https://your-external-url.com' }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

这样当用户访问/external-site路径时，Angular会加载ExternalRedirectComponent，然后自动跳转到指定的外部链接。

总结一下：Angular Router本身不支持直接配置外部链接，但通过上面三种方法，完全能满足你跳转外部网站的需求，根据你的场景选最合适的就行~

内容的提问来源于stack exchange，提问作者Orion