为什么我的 Angular 路由模块不能使用参数？

Question

我有以下路由模块：

const routes: Routes = [
  { path: '', component: HomeComponent },\
  { path: 'x', component: xComponent},
  { path: 'x-d/:mid', component: xdComponent}
];

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

当我在浏览器中直接进入 mywebsite/x 时，它运行良好，但是，如果我进入 mywebsite/x-d/5（任何 id 都应该在这里工作），它会给我一个错误 404。

我已经将我的 apache 配置为回退到 index.html 所以 Angular 处理前端的所有内容，但是，带有参数的路由没有正确加载。

我在下面包含了我的 .htaccess 文件和我的后备配置，它是 Angular Apache 文档的标准。

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

Answer 1

只是为了确认，您的实际 URL 路径不应包含 id（或在您的情况下为 mid） ':' 。它应该是例如mywebsite/x-d/23

Answer 2

我解决了

我运行我的构建脚本具有以下内容：

sudo ng build --prod --base-href ./

我所要做的就是删除点，如下所示：

sudo ng build --prod --base-href /

为什么我的 Angular 路由模块不能使用参数？

Why is my Angular routing module not working with parameters?

javascript

apache

router

typescript

angular