html - Angular 路由问题。错误：未捕获（在 promise 中）：错误：无法匹配任何路由

我正在使用带路由的 Angular Material。在点击事件之后，我希望我的应用程序能跳转到一个包含参数 currentUser 的 URL。以下是 app.component.html 文件中的点击事件：

<button mat-icon-button class="icon shopping cart-icon" aria-label="Icon-button with shopping cart icon" (click)="getCartByUser()"  [routerLink]="['/carts/cart_by_user/', currentUser]"  routerLinkActive="active">
    <mat-icon>shopping_cart</mat-icon>
  </button>

app-routing.module.ts：

const routes: Routes = [
    {path: 'carts/cart_by_user/:cartOfUser', component: CartComponent, pathMatch:'full'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

问题是，当我执行应用程序并触发点击事件时，会显示以下错误：

Http 请求失败响应，地址 http://localhost:8080/carts/cart_by_user/$%7Buser%7D：400 OK

控制台中的错误：

错误 错误：未捕获（在 promise 中）：错误：无法匹配任何路由。URL 段：'carts/cart_by_user;id=9;code=000;...'

app.component.ts 文件：

export class AppComponent implements OnInit {
    public currentUser!: User;
    public currentLogIn:boolean=false;
    constructor(private  shared: SharedService, private cartService:CartService){}
    ngOnInit():void {
        this.shared.castCart.subscribe(cart=>this.cart=cart);
        this.shared.castUser.subscribe(currentUser=>this.currentUser=currentUser);
        this.shared.castLoggedIn.subscribe(currentLogIn=>this.currentLogIn=currentLogIn);
  }

public getCartByUser():void{
    if(this.currentLogIn){
    this.cartService.getCartByUser(this.currentUser).subscribe(
      (response: Cart) => {
        this.cart=response;
        this.shared.setCart(this.cart);
        console.log(response);
      },
      (error: HttpErrorResponse)=>{
        alert(error.message);
      }
    )
    }

  }

shared.service.ts：

export class SharedService {
    public defaultCart!: Cart;
    private cart= new BehaviorSubject<Cart>(this.defaultCart);
    castCart = this.cart.asObservable();

    public defaultUser!: User;
    private user= new BehaviorSubject<User>(this.defaultUser);
    castUser = this.user.asObservable();

    private loggedIn= new BehaviorSubject<boolean>(false);
    castLoggedIn = this.loggedIn.asObservable();

    setCart(data: Cart){
        this.cart.next(data);   }

    setUser(data: User){
        this.user.next(data);   }

    setLoggedIn(data:boolean){
        this.loggedIn.next(data);   }
}

cart.service.ts:

export class CartService {

    constructor(private http: HttpClient) { }
    public getCartByUser(user : User): Observable<Cart> {
        return this.http.get<Cart>('http://localhost:8080/carts/cart_by_user/${user}');
    }
}

答案＃1

你的currentUser不仅仅是一个字符串。它是一个对象，包含id=9;code=000...，它无法找到以这些参数结尾的 URL。不如直接使用用户的 ID 吧？重构你使用 URL 参数user对象的地方，仅使用user.id。

答案＃2

这是两个不同的错误。

错误 1

Http 对 http://localhost:8080/carts/cart_by_user/$%7Buser%7D 的失败响应：400 OK

来自 cart.service.ts。你正在尝试使用单引号进行字符串插值。如果你想进行字符串插值，你需要使用反引号。

export class CartService {

    constructor(private http: HttpClient) { }
    public getCartByUser(user : User): Observable<Cart> {
        return this.http.get<Cart>(`http://localhost:8080/carts/cart_by_user/${user}`);
    }

然而，我不知道用户对象是什么样子，也不知道你的 API 期望什么，所以我完全不知道那是否会给你正确的 GET 请求。

错误 2

错误 错误：未捕获（在 promise 中）：错误：无法匹配任何路由。URL 段：'carts/cart_by_user;id=9;code=000;...'

你可以看到在 cart_by_user 之后缺少一个 /。我相信 routerLink 会在路径段之间添加一个 /，这可能在你的路径中被忽略了。只需删除末尾的 /

[routerLink]="['/carts/cart_by_user', currentUser]"