如何修复错误：未捕获（承诺）：错误：无法匹配任何路由。网址区隔：“ ****”

Question

我第一次使用Angular作为前端。

在我的Angular应用程序的 user-profile.component.html 中，有一个编辑按钮，在 app-routing.module.ts 中为其指定了路线>文件。

这是我的 user-profile.component.html

<mat-spinner *ngIf="isLoading"></mat-spinner>
<mat-accordion multi="true" *ngIf="posts.length > 0 && !isLoading">
  <mat-expansion-panel *ngFor="let post of posts">
    <mat-expansion-panel-header>
      {{ post.title }}
    </mat-expansion-panel-header>
    <div class="post-image">
      <img [src]="post.imagePath" [alt]="post.title">
    </div>
    <p>{{ post.content }}</p>
    <mat-action-row *ngIf="userIsAuthenticated && userId === post.creator">
      <button mat-button color="primary" [routerLink]="['userProfileEdit', post.id]">EDIT</button>
      <button mat-button color="warn" (click)="onDelete(post.id)">DELETE</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>
<mat-paginator [length]="totalPosts" [pageSize]="postsPerPage" [pageSizeOptions]="pageSizeOptions" (page)="onPageChanged($event)" *ngIf="posts.length > 0"></mat-paginator>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0 && !isLoading">No posts Yet</p>

第12行有routerLink，[routerLink]="['userProfileEdit', post.id]"

在下面给出的 app-routing.module.ts 中指向此路线的

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PostListComponent } from './posts/post-list/post-list.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { LoginComponent } from './auth/login/login.component';
import { SignupComponent } from './auth/signup/signup.component';
import { AuthGuard } from './auth/auth-guard';
import { UserProfileComponent } from './user-profile/user-profile.component';

const routes: Routes = [
  {path: '', component: PostListComponent },
  {path: 'create', component: PostCreateComponent, canActivate: [AuthGuard] },
  {path: 'edit/:postId', component: PostCreateComponent, canActivate: [AuthGuard]},
  {path: 'login', component: LoginComponent},
  {path: 'signup', component: SignupComponent},
  {path: 'userProfile', component: UserProfileComponent, canActivate: [AuthGuard]},
  {path: 'userProfileEdit/:postId', component: PostCreateComponent, canActivate: [AuthGuard]}
];

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

在第17行，应该有对应的指定路由{path: 'userProfileEdit/:postId', component: PostCreateComponent, canActivate: [AuthGuard]}。

我修复了我在SO [routerLink]="['userProfileEdit', post.id]"中搜索类似问题时遇到的语法错误。但是仍然没有用。

要提及的是，该 app-routing.module.ts 中的所有其他路由都可以在我的应用程序的所有其他部分中完美运行，没有问题。

这是控制台日志中错误的屏幕截图。

只是期待一些线索。谢谢。

Answer 1

只需替换

 [routerLink]="['userProfileEdit', post.id]

与此

[routerLink]="['/userProfileEdit', post.id]"

修改

如果您将/等斜线routerLink添加到[routerLink]="['/userProfileEdit']，则意味着要使用基本网址（例如localhost/userProfileEdit）进行路由。而且，如果您添加的路由没有/之类的斜杠[routerLink]="['userProfileEdit']，它将userProfileEdit附加到地址栏中已经存在的现有网址中。