Problems with Angular routing. Error: Uncaught (in promise): Error: Cannot match any routes

Question

我正在使用 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>

应用-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 failure response for http://localhost:8080/carts/cart_by_user/$%7Buser%7D: 400 OK

控制台错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '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}');
    }
}

Answer 1

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

Answer 2

这是两个不同的错误。

错误 1

Http failure response for 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 期望什么，所以我不知道这是否会给您正确的获取请求。

错误 2

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'carts/cart_by_user;id=9;code=000;...'

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

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

Problems with Angular routing. Error: Uncaught (in promise): Error: Cannot match any routes

Problems with Angular routing. Error: Uncaught (in promise): Error: Cannot match any routes

html

routes

typescript

angular-material

angular