为 Angular 中数据库中的每个条目生成唯一的 URL 6

Question

我的 MongoDB 中有一堆数据，我正在为我的应用程序使用 MEAN 堆栈。所以我有一个搜索，用户可以在数据库中搜索条目，我们以医院为例。用户可以指定医院的选项，系统会显示符合条件的医院。因此，如果用户现在单击一家医院，他们将获得该医院的全部详细信息。额外页面/组件上的开放时间、停车可能性等。

所以我现在想为这个特定的医院创建一个唯一的 link，这样用户就可以将其保存在他们想要的任何地方，并在下次无需使用搜索的情况下访问它。

我想要这样的东西 -> http://mywebsite.com/hospital/california/alameda-hospital

我该如何解决这个问题？我的组件基于通常包含医院信息的 @Input()。所以现在，当用户输入 URL 时，我需要请求我的数据库，获取所需的信息并将它们填充到我的对象中 hospitalDetails: Object 或者正确的方法是什么？

Answer 1

在 ngOnInit 中使用路由参数，并订阅更改，更新组件值：

constructor( private hospitalService: HospitalService, private route: ActivatedRoute ) // lets say you get the hospital info from the hospitalService via a get
ngOnInit(){
  this.route.params.subscribe(params => {
      this.hospitalId = params.hospitalId
      this.hospitalService.getHospital(this.hospitalId).subscribe( hospital => {
       this.hospital = hospital
      }
  }
}

在您定义路由的路由器中：

{ path: "hospital/:state/:hospitalId", component: HospitalDetailsComponent }

这定义了可以在 route.params 订阅中访问的参数。

我只使用 hospitalId 作为通用标识符，但您可以结合州和医院名称来完成同样的事情。

编辑：您仍然可以在医院详细信息中使用@Input 装饰器。该组件可以用作模板组件（使用@input）或路由器出口替代（路由器直接指向它。完全相同的代码适用于这两种情况。我一直使用这种模式。

Answer 2

我更喜欢 constante in typescript 以“保持简单”。

为 Angular 中数据库中的每个条目生成唯一的 URL 6

Generate unique URL for every entry in Database in Angular 6

angular-routing

angular