角度布线的问题.错误:未捕获(承诺中):错误:无法匹配任何路由

Question

我正在使用带布线的Angular材质。点击事件后，我希望我的应用程序将转到一个包含参数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/$%7用户%7D:400 OK

控制台中的错误：

错误错误：未捕获(承诺中(：错误：无法匹配任何路由。URL段：carts/cart_by_user；id＝9；代码=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}');
}
}

Answer 1

您的currentUser不仅仅包含字符串。这是一个对象，有id=9;code=000...，它找不到以这样的params结尾的url。只使用用户的id如何？Refactor将您使用的url参数user对象放置为仅user.id。

Answer 2

这是两个不同的错误。

错误1

h的Http失败响应​ttp://localhost:8080/carts/cart_by_user/$%7用户%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

错误错误：未捕获(承诺中(：错误：无法匹配任何路由。URL段：carts/cart_by_user；id＝9；代码=000；…'

您可以看到cart_by_user后面缺少一个/。我相信routerLink在路径段之间添加了一个/，这可能是您的错误。只需移除尾随的/

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