如何将数据从Angular应用传递到Flutter应用？URL传参无法接收

算力阿峰

2026-10-4

问题修复方案

已知错误点

URL拼接语法错误：Angular端字符串拼接逻辑混乱，实际生成的URL没有正确带入Value1变量值，反而会把拼接符号当成URL的一部分
URL格式错误：路径与查询参数之间存在多余空格，会导致URI解析异常
参数名不匹配：Angular端传递的参数名为InputParameter1，Flutter端取值时用的参数名为InputParameter，二者不一致
哈希路由参数解析错误：Flutter Web使用哈希路由模式时，查询参数放在#标识的路由片段后，直接解析整个href的queryParameters会取不到哈希片段内的参数

修复后的代码

Angular端代码

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'web-app';
onNavigate(){
  // 正确拼接URL，参数值做编码处理，去掉多余空格
  const Value1 = "你要传递的实际值";
  const url = `http://localhost:61097/#/plants/garden?InputParameter1=${encodeURIComponent(Value1)}`;
  window.open(url, '_blank');   
}
}

Flutter端代码

import 'dart:html' as html;

void get() {
  // 先提取哈希路由片段，去掉开头的#号后再解析参数
  final hashFragment = html.window.location.hash.substring(1);
  final uri = Uri.parse(hashFragment);
  final Map<String, String> params = uri.queryParameters;
  String? data = params["InputParameter1"]; // 参数名和Angular端保持一致
}