直接 url 條路由工作，而路由器鏈接失敗 - Angular 14

Question

Angular 14 路由器在這里遇到問題。 當我如下建立路線時。 我可以直接點擊 url 加載正確的組件但是如果我使用

• [routerLink]="['specialUser/']"
• [routerLink]="['specialUser/coolList']"
• [routerLink]="['specialUser/coolList/neatPlace']"

在我的應用程序中，它會短暫地更改 url，然后從 url 中剝離 routerlink 路徑，然后根本不加載任何組件。 除了根 ProfileComp.net。

app.component.html

this is where the ProfileComponent loads
<router-outlet></router-outlet>

配置文件.component.html

simply a nested router outlet
<router-outlet></router-outlet>

航線

const routes: Routes = [
  { path: '', component: LandingPageComponent },
  { path: 'privacy', component: PrivacyComponent },
  { path: 'privacy-policy', component: PrivacyComponent },
  { path: 'support', component: SupportComponent },

  {
    path: 'profile',
    component: ProfileComponent,
    children: [
      { path: ':username', component: ProfileDetailsComponent },
      { path: ':username/:listName', component: ListComponent },
      { path: ':username/:listName/:placeName', component: PlaceComponent },
      { path: ':username/fancy/:group/:fancy', component: FancyComponent },
    ],
  },
];

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

在閱讀了有關其工作原理的詳盡說明后，嘗試在各個地方進行完全路徑匹配，但沒有任何好處。

Answer 1

您需要做的是將子路由相互嵌套，並為每個子路由創建新的空字符串路徑。 像這樣：

  const routes: Routes = [
      {
        path: 'profile',
        component: ProfileComponent,
        children: [
          { 
            path: ':username',
            children: [
              { path: '', component: ProfileDetailsComponent },
              { path: ':listName', children: [
                  { path: '', component: ListComponent },
                  { path: ':placeName', component: PlaceComponent } 
              ],
              { path: 'fancy/:group/:fancy', component: FancyComponent },
            ]
          }
        ],
      },
    ];