Angular带自定义匹配器的父路由无法匹配子路由问题

在父路由使用自定义正则匹配器时，访问带子路由的URL（如/barcode/safety-assessment），仅渲染父组件DisplayRootComponent，未加载预期的子组件SafetyAssessmentComponent。以下是针对性解决方案：

• 检查父组件是否包含路由出口
  子组件必须通过父模板中的<router-outlet>标签才能渲染，这是最容易遗漏的关键点。在DisplayRootComponent的HTML模板中添加：

  <router-outlet></router-outlet>
  

• 确认自定义匹配器未终止路由匹配
  确保匹配器函数返回的结果未设置terminal: true（默认值为false，允许后续子路由匹配）。你的当前实现已经正确消费第一个URL段并保留剩余段给子路由，无需修改，但可以显式声明terminal: false以明确逻辑：

  const barcodeRoute = () => (segments: UrlSegment[]) => {
      if (!segments.length)
          return null;
  
      const segment = segments[0];
      if (barcodeRegex.test(segment.path)) {
          return {
              consumed: [segment],
              posParams: { barcode: segment },
              terminal: false // 显式允许子路由匹配
          };
      }
      return null;
  }
  

• 验证路由参数传递（可选）
  确保posParams的参数值格式正确，Angular接受UrlSegment类型作为参数值，当前实现无误，若需传递纯字符串也可改为：

  posParams: { barcode: new UrlSegment(segment.path, {}) }
  

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