Angular 17 子路由不起作用

问题描述 投票：0回答：2

我有一个非常简单的

angular 17
应用程序，但我在路由到子路由时遇到了问题。所有组件都是独立的。

这就是我的 

app.routes.ts
的样子：

export const routes: Routes = [
  {
    path: "",
    pathMatch: "full",
    redirectTo: "home",
  },
  {
    path: "home",
    component: HomeComponent,
  },
  {
    path: "market",
    component: CampaignListComponent,
    children: [
      {
        path: "device",
        component: DeviceComponent,
      },
    ]
  },
];

这就是我的 

app.component.html
的样子：

<div id="container">

  <div id="content">
  <router-outlet></router-outlet>
  </div>

</div>

这是我的

app.config.ts
：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
  ],
};

如果我像这样导航到

/market
：

this.router.navigate(['market']);

它起作用了，市场页面出现了。我向我的 

market.component.html
添加了一个按钮，称为：

this.router.navigate(['device'], { relativeTo: this.route });

但导航失败并显示以下消息：

错误错误：NG04002：无法匹配任何路由。网址段： “市场/设备”

我尝试将 

<router-outlet></router-outlet>
添加到我的 
market.component.html
但出现了同样的错误。

这是index.html：

<!doctype html>
<html lang="en">
<head>
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

有什么问题吗？

angular angular-ui-router
2个回答
0
投票

您缺少基本 href，这可能是问题所在

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My app</title>
    <meta charset="UTF-8" />
    <base href="/" /> <!-- changed here! -->
  </head>
  <body class="mat-typography">
    <app-root></app-root>
  </body>
</html>
0
投票

嗯，看来你的 html 是

我的角度应用程序
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.