javascript - 为什么参数没有以 Angular 形式传入resolved？

Question

我试图在单击按钮时在解析器中传递参数。但出现错误错误

ERROR
Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'next'
Error: Cannot match any routes. URL Segment: 'next'
at ApplyRedirects.noMatchError (https://angular-sxurk5.stackblitz.io/turbo_modules/@angular/router@6.0.0/bundles/router.umd.js:1422:16)
at CatchSubsc

像这样传递参数

 sclick(e){
    e.preventDefault();
    console.log(this.sfrm.value.name);

    this.router.navigate(['next/'],{ queryParams: { value: this.sfrm.value.name} });

    }

像这样使用参数

@Injectable()
export class TestResolver implements Resolve<Observable<string>> {
  constructor(private testService: TestService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    // id = 1

    return this.testService.getConfiguration(route.params.value);
  }
}

完整代码

https://stackblitz.com/edit/angular-sxurk5?file=src%2Fapp%2Fhello.component.ts

当我点击提交按钮时，它显示上述错误，为什么？

Answer 1

您必须配置 next 路由，而不仅仅是 next/:value 路由。

const routes: Routes = [
  { path: 'home', component: HelloComponent },
  { path: 'next', component: NextComponent, resolve: { data: TestResolver} },
  { path: '', redirectTo: '/home', pathMatch: 'full'}
];

在TestResolver.ts中使用queryParams而不是params

resolve(route: ActivatedRouteSnapshot): Observable<any> {
  console.log('dd',route.queryParams.value)
  return this.testService.getConfiguration(route.queryParams.value);
}