路由查询参数含&匹配异常 如何使eSignAndRegistration变量为真？

• & 是URL查询参数的默认分隔符，当你在URL里传入?esign&registration时，浏览器会自动将其拆分为两个独立的查询参数esign和registration，根本不会把esign&registration识别为一个完整的参数名。
• 你代码中匹配的参数名写的是esign&registration，这里的&是HTML的转义实体，而Angular的queryParamMap读取到的是URL解码后的原始参数名，两者并不匹配。
• 你的判断顺序存在逻辑问题：短参数registration的判断放在了更特殊的组合参数判断之前，就算组合参数能被正确识别，也会先命中第一个registration的判断逻辑，直接跳出分支走不到后面的组合参数匹配。

方案1：保留参数名规则的修改方式 #

第一步：传参时做URL编码 #

如果你确实需要将esign&registration作为一个完整的查询参数名传递，传参时需要把&做URL编码，转义为%26，最终传参格式为?esign%26registration，这样浏览器就不会把&当作参数分隔符处理。

第二步：调整代码匹配逻辑与判断顺序 #

1. 把组合参数的判断放在最前面，优先匹配特殊的长参数
2. 将匹配的参数名改为原生的esign&registration，不要用HTML转义的&

修改后的代码如下：

eSignAndRegistration: boolean;
registration: boolean;
esign: boolean;
css: boolean;

ngOnInit(): void {
  // 优先判断更特殊的组合参数
  if (this.activatedRoute.snapshot.queryParamMap.has('esign&registration')) {
    this.eSignAndRegistration = true;
  } else if (this.activatedRoute.snapshot.queryParamMap.has('registration')) {
    this.registration = true;
  } else if (this.activatedRoute.snapshot.queryParamMap.has('esign')) {
    this.esign = true;
  } else if (this.activatedRoute.snapshot.queryParamMap.has('css')) {
    this.css = true;
  }
}

方案2：更规范的优化方案（推荐） #

不建议在参数名里包含特殊字符，可以改成通过参数值区分的方式，可读性和兼容性更好：
传参格式改为?signType=eSignAndRegistration，代码逻辑调整为判断参数值即可：

eSignAndRegistration: boolean;
registration: boolean;
esign: boolean;
css: boolean;

ngOnInit(): void {
  const signType = this.activatedRoute.snapshot.queryParamMap.get('signType');
  switch(signType) {
    case 'eSignAndRegistration':
      this.eSignAndRegistration = true;
      break;
    case 'registration':
      this.registration = true;
      break;
    case 'esign':
      this.esign = true;
      break;
    case 'css':
      this.css = true;
      break;
  }
}

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