如何在Angular 5中通过按钮点击事件跳转至外部网站

别担心，这其实是Angular里非常基础的操作，我给你两种简单靠谱的方案，完全能满足你的需求：

方案一：用<a>标签伪装成按钮（无额外逻辑时首选） #

如果你的按钮不需要执行任何前置逻辑，直接跳转就行，那用HTML原生的<a>标签是最省事的——只需要给它加个按钮样式，看起来就和普通按钮一模一样。

在你的组件模板文件（.html）里加这段代码：

<a href="https://你的外部应用完整URL" target="_blank" class="btn btn-primary">打开AngularJS/Python应用</a>

• target="_blank"：设置在新浏览器窗口/标签页打开外部网站，如果你想在当前页面跳转，删掉这个属性就行
• class="btn btn-primary"：用Bootstrap的按钮样式（如果你的项目没用到Bootstrap，换成你自己的按钮CSS类就好）

这种方法不需要写任何TypeScript代码，直接在模板里搞定，适合简单场景。

方案二：通过组件类处理点击事件（需要前置逻辑时使用） #

如果你的按钮需要先执行一些操作（比如验证用户权限、记录跳转日志）再跳转，那就用这种方式：

第一步：在模板里绑定点击事件 #

在组件的.html文件中添加按钮，并绑定click事件：

<button (click)="openExternalApp()" class="btn btn-primary">打开AngularJS/Python应用</button>

第二步：在组件类中实现跳转逻辑 #

打开对应的组件TypeScript文件（.ts），添加openExternalApp方法：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  openExternalApp(): void {
    // 这里可以添加你需要的前置逻辑，比如：
    // console.log('用户点击了跳转按钮');
    // 执行验证操作等

    // 方式1：在新窗口打开外部网站
    window.open('https://你的外部应用完整URL', '_blank');

    // 方式2：在当前页面跳转（替换当前应用）
    // window.location.href = 'https://你的外部应用完整URL';
  }
}

根据你的需求选跳转方式就行：window.open是新窗口打开，window.location.href是替换当前页面。

注意：Angular自带的Router模块是用来跳转应用内部路由的，对于外部网站，直接用原生JS的window对象就够了，不用绕弯路。

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