如何在TypeScript中实现点击按钮覆盖当前页面跳转新HTML页面

你遇到的核心问题是混淆了Angular单页路由和原生页面跳转的适用场景：

场景1：在Angular单页应用内切换路由（同一HTML页面替换内容） #

如果你的目标是在SPA内切换到Home组件而非加载新HTML页面，之前的路由代码本身逻辑没问题，问题出在路由配置或模板结构：

1. 检查路由配置（app-routing.module.ts），确保home路由正确关联目标组件：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  // 其他路由配置
];

2. 检查主模板（如app.component.html），确保只有一个<router-outlet>标签，且页面底部没有额外固定内容。如果之前的页面存在未被路由接管的内容，路由切换时只会替换<router-outlet>内的部分，看起来像是“追加”，实际是原有内容未被替换。

场景2：跳转至完全独立的新HTML页面 #

如果你的需求是加载全新的HTML文件（比如home.html）并覆盖当前页面，不能使用Angular Router（它仅负责SPA内部组件切换），必须用原生JS的页面跳转方法：

// 普通跳转，保留当前页面的历史记录
window.location.href = '/home.html';

// 替换当前历史记录，无法通过返回回到原页面
window.location.replace('/home.html');

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