Angular 5本地应用重定向外部网站路径异常问题咨询

这个问题其实是浏览器的URL解析规则在搞鬼！当你只写"www.google.co.uk"时，浏览器会默认把它当成相对路径——也就是相对于当前页面的根地址（你的http://localhost:4200）来拼接，所以才会出现把目标地址追加到本地路径后面的情况。

解决起来很简单，只需要给目标URL加上完整的协议头（http://或者https://）就行，这样浏览器就会识别这是一个独立的绝对URL，直接跳转到目标网站：

window.location.href = "https://www.google.co.uk";

另外，如果你想遵循Angular的最佳实践，尽量避免直接操作全局的window对象，可以通过注入DOCUMENT服务来实现同样的效果，代码示例如下：

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

// 在组件构造函数中注入DOCUMENT
constructor(@Inject(DOCUMENT) private document: Document) {}

// 定义重定向方法
redirectToExternalSite() {
  this.document.location.href = "https://www.google.co.uk";
}

这样既实现了外部跳转，又符合Angular的依赖注入规范，避免了直接操作全局对象带来的潜在问题。

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