如何从父iframe向Angular应用传递参数以指定默认加载路由

你遇到的Error: Cannot match any routes. URL Segment: 'index.html'报错，本质是Angular默认使用HTML5路径路由策略（PathLocationStrategy），会把完整URL路径作为路由段匹配，index.html会被识别为待匹配的路由条目，未定义该路由自然触发报错。以下是两种适配你场景的可行方案：

方案1：启用哈希路由模式（无需额外兼容，实现最简单） #

哈希模式下只有#之后的内容会被Angular路由解析，index.html不会进入路由匹配逻辑，同时可以直接拼接要默认加载的路由，无需额外写跳转逻辑：

1. 修改路由模块配置，启用哈希模式：

// app-routing.module.ts
@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 直接修改iframe的src属性，拼接目标路由即可：

<!-- 直接默认加载whatever路由 -->
<iframe src="[path]/index.html#/whatever" />
<!-- 需要传递额外参数也可以直接拼接在路径后 -->
<iframe src="[path]/index.html#/whatever?customParam=xxx" />

方案2：保留HTML5路由模式，兼容index.html路径 #

如果不想改用哈希模式，可以通过路由重定向+参数读取实现需求：

1. 路由表最顶部添加index.html的重定向规则，避免路由匹配报错：

// app-routing.module.ts
const routes: Routes = [
  // 匹配到index.html时重定向到根路由，优先级最高
  { path: 'index.html', redirectTo: '/', pathMatch: 'full' },
  // 下方保留你原有所有路由规则
  { path: 'whatever', component: WhateverComponent },
  // ...其他路由
]

2. iframe的src按照你原来的写法拼接query参数即可：

<iframe src="[path]/index.html?r=whatever&otherParam=yyy" />

3. 根组件初始化时读取query参数，手动跳转目标路由：

// app.component.ts
import { ActivatedRoute, Router } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  // 原有组件配置无需修改
})
export class AppComponent {
  constructor(
    private route: ActivatedRoute,
    private router: Router
  ) {
    // 读取路由参数并跳转
    this.route.queryParams
      .pipe(filter(params => !!params.r))
      .subscribe(params => {
        this.router.navigate([params.r], {
          // 可以选择移除参数r，也可以保留所有参数
          queryParams: { ...params, r: undefined }
        });
      });
  }
}

注：如果当前你的Angular应用在无参数时可以正常运行，说明ASP.NET端已经配置了路径fallback到index.html，方案2无需额外修改服务端配置。

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