html - Problem med Angular-routing. Fel: Uncaught (in promise): Fel: Kan inte matcha några rutter

Jag använder Angular Material med routing. Efter en klickhändelse vill jag att min app ska gå till en URL som innehåller parametern currentUser. Följande är klickhändelsen i filen 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 {}

Problemet är att när jag kör appen och klickar på händelsen visas följande fel:

Http-fel svar för http://localhost:8080/carts/cart_by_user/$%7Buser%7D: 400 OK

Fel i konsolen:

FEL Fel: Oinfångad (i löfte): Fel: Kan inte matcha några rutter. URL-segment: 'carts/cart_by_user;id=9;code=000;...'}

app.component.ts-fil:

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}');
    }
}

Svar #1

Din currentUser innehåller mer än bara en sträng. Det är ett objekt som har id=9;code=000... och kan inte hitta en URL som slutar med sådana parametrar. Vad sägs om att bara använda användarens id? Refaktorera platser där du använder URL-parametern user till bara user.id.

Svar #2

Det här är två olika fel.

Fel 1

Http-fel svar för http://localhost:8080/carts/cart_by_user/$%7Buser%7D: 400 OK

Kommer från cart.service.ts. Du försöker använda stränginterpolation med enkla citattecken. Om du vill använda stränginterpolation måste du använda backticks.

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}`);
    }

Men jag vet inte hur användarobjektet ser ut, eller vad ditt API förväntar sig, så jag har ingen aning om det kommer att ge dig rätt GET-förfrågan.

Fel 2

FEL Fel: Oinfångad (i löfte): Fel: Kan inte matcha några rutter. URL-segment: 'carts/cart_by_user;id=9;code=000;...'}

Du kan se att det fattas ett / efter cart_by_user. Jag tror att routerLink lägger till ett / mellan sökvägssegmenten, vilket förmodligen har undgått ditt. Ta bara bort det avslutande /.

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