Angular 路由的问题。错误：未捕获（承诺中）：错误：无法匹配任何路由答案

【问题标题】：Problems with Angular routing. Error: Uncaught (in promise): Error: Cannot match any routesAngular 路由的问题。错误：未捕获（承诺中）：错误：无法匹配任何路由
【发布时间】：2022-02-02 20:29:22
【问题描述】：

我正在使用带有路由的 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 {}

问题是当我执行app和click事件时，显示如下错误：

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

控制台出错：

ERROR 错误：未捕获（在承诺中）：错误：无法匹配任何路由。 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}');
    }
}

【问题讨论】：

标签： html angular typescript routes angular-material

【解决方案1】：

您的currentUser 不仅仅包含字符串。这是一个对象，它有 id=9;code=000... 它找不到以此类参数结尾的 url。只使用用户的 id 怎么样？将使用 url 参数 user 对象的地方重构为 user.id。

【讨论】：

非常感谢，它成功了！

【解决方案2】：

这是两个不同的错误。

错误 1

http://localhost:8080/carts/cart_by_user/$%7Buser%7D 的 Http 失败响应：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 期望什么，所以我不知道这是否会给你正确的获取请求。

错误 2

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

您可以看到在 cart_by_user 之后缺少一个 /。我相信routerLink 在路径段之间添加了一个/，这可能已经逃过了你的视线。只需删除尾随的/

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

【讨论】：