Angular 2如何无需组件路由显示独立HTML确认页面？

我明白你遇到的问题——提交订单后想跳转到一个纯HTML的确认页，但window.location.href没生效，而且不想为这个简单的页面创建Angular组件。下面是几个经过验证的可行方案，按推荐程度排序：

方案1：修正window.location.href的路径（最直接） #

很多时候window.location.href无效，根本原因是路径写错了。Angular项目打包后，放在src/assets目录下的文件会被复制到打包后的/assets路径下，所以你需要确保指向正确的绝对路径：

首先把你的确认页HTML（比如confirmation.html）放到src/assets文件夹里，然后在订单组件的提交方法里这样写：

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

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html'
})
export class OrderComponent {
  onSubmitOrder() {
    // 先完成订单提交的业务逻辑（比如调用API）
    // 然后跳转到确认页
    const baseUrl = window.location.origin; // 获取当前站点的根URL，比如http://localhost:4200
    window.location.href = `${baseUrl}/assets/confirmation.html`;
  }
}

用window.location.origin拼接路径可以避免相对路径带来的问题，不管你的项目部署在什么环境下都能正确指向静态HTML文件。

方案2：通过Angular路由间接跳转（整合路由体系） #

如果你希望通过Angular的路由系统来管理这个跳转（比如用户可以直接访问/confirmation路径），可以创建一个空的跳转组件，不需要任何模板：

1. 生成一个空组件：

ng generate component confirmation-redirect --inline-template --inline-style

2. 修改这个组件的代码，在初始化时直接跳转到静态HTML：

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

@Component({
  selector: 'app-confirmation-redirect',
  template: '' // 空模板，不需要任何内容
})
export class ConfirmationRedirectComponent implements OnInit {
  ngOnInit(): void {
    // 同样用绝对路径跳转
    window.location.href = `${window.location.origin}/assets/confirmation.html`;
  }
}

3. 在app-routing.module.ts里配置路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrderComponent } from './order/order.component';
import { ConfirmationRedirectComponent } from './confirmation-redirect/confirmation-redirect.component';

const routes: Routes = [
  { path: 'order', component: OrderComponent },
  { path: 'confirmation', component: ConfirmationRedirectComponent }
];

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

4. 最后在订单组件里用Angular的Router跳转：

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

@Component({
  selector: 'app-order',
  templateUrl: './order.component.html'
})
export class OrderComponent {
  constructor(private router: Router) {}

  onSubmitOrder() {
    // 处理订单提交
    this.router.navigate(['/confirmation']);
  }
}

这样看起来是在使用Angular路由，但实际上会自动跳转到你的静态HTML页面，完美整合现有路由体系。

方案3：在Angular应用内渲染静态HTML（无需跳转） #

如果你的需求不是跳转到独立页面，而是在当前Angular应用里显示确认页内容，可以用HttpClient获取HTML内容，然后通过[innerHTML]渲染：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-order',
  template: `
    <!-- 你的订单表单 -->
    <button (click)="submitOrder()">提交订单</button>

    <!-- 确认页内容区域 -->
    <div *ngIf="showConfirmation" [innerHTML]="confirmationHtml"></div>
  `
})
export class OrderComponent {
  showConfirmation = false;
  confirmationHtml = '';

  constructor(private http: HttpClient) {}

  submitOrder() {
    // 处理订单提交逻辑
    this.http.get('/assets/confirmation.html', { responseType: 'text' })
      .subscribe(htmlContent => {
        this.confirmationHtml = htmlContent;
        this.showConfirmation = true;
      });
  }
}

这个方案不需要离开Angular应用，适合需要保留应用头部/尾部等公共组件的场景。

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