如何使用特定的url初始化角度应用程序？

Question

您好，感谢您抽出时间。

我想做的事：

1. 我有原始的 html/css/js 网站，其中有类似

   https://example.com/job/plumber/questons/1

   的链接

2. 当用户单击它时，这将打开管道工类别问题 1 的角度应用程序，然后用户可以使用它。

我不知道如何处理

如果在我的原始 html 中设置类似这样的内容：

<a href="https://example.com/index.html">

它只是打开默认的角度页面，但是如何预定义这个url的url和params？

所以，我想应该是这样的=>

<a href="https://example.com/index.html#/job/plumber/questons/1">

您能指导我该怎么做吗？

__

我的应用程序路由.module.ts

const routes: Routes = [
  {path: '', component: QuestionPageComponent},
  {path: 'job/:jobId/questions/:id', component: QuestionPageComponent},
  {path: 'result', component: ResultPageComponent},
  // {path: '**', component: ErrorPageComponent}
];

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

我的Nginx

server {
    listen 443 ssl;
    ssl_certificate #;
    ssl_certificate_key #;
    server_name example.com www.example.com;
    root   /home/example;
    index  main.html; // raw_html site
}

index.html 也只是在 /home/example 文件夹中设置；

我知道，这样的事情可以为一条路线提供帮助：

{ path: '', redirectTo: '/job/plumber/questions/1', pathMatch: 'full' },

但我有数百个问题。

Answer 1

首先你的路由配置有错误。您的路线在第一个位置带有“path: ''”并且没有完整的pathMatch。这意味着，任何包含空字符串的路径都会匹配！因此所有路径都将匹配第一个规则。为了解决这个问题，您可以向其中添加 pathMatch: 'full' 或将其移至路线数组的末尾。

关于你的问题：

<a href="https://example.com/index.html#/job/plumber/questons/1">

如果您的 Angular 应用程序在 example.com 的根目录上可用，那么这将起作用：

<a href="https://example.com/job/plumber/questons/1">

（当然假设您确实以正确的方式设置了路线）

备注：在您的应用程序内部，您当然应该使用 routerLink 指令作为链接。

如果您想以某种方式动态重定向到某个路由，您还可以使用根组件内部的路由器服务：

  constructor(private readonly router: Router) {
    router.navigate(...);
  }

（用您的路由信息替换点）

请参阅此处的角度文档： [https://angular.io/api/router/Router#navigate][1]