7 - 8 条动态路线

Question

我有一个 Angular 应用程序，它应该能够根据用户创建新路线。比方说，用户johndoe的“寄存器，然后应用程序应该创建一个路线：domain/johndoe。

当然，/johndoe路线应该提供一些关于特定用户的信息（如姓名、图像等）。

我使用 Google Cloud Hosting 和 Firestore 作为后端解决方案，到目前为止我的进展是将 注入Router到我的AppComponent构造函数中，然后unshift在router.config. 那种工作，但我必须将所有新路由（'用户'）存储到我的数据库中的一个单独的文件中，然后每次有人导航到一个私有的死记硬背（例如domain/johndoe）时查询数据库。

是否有一个美观且易于维护的解决方案，它考虑了我的后端配置？

Answer 1

您可以将 userName 作为路由参数传递。在路由数组中

{ path: 'domain/:username', component: UserDetailsComponent }

在 HTML 中：

<a [routerLink]="['/domain', usernameVar]">

当有人点击链接时，它将路由到 UserDetailsComponent。在组件中，可以读取用户名。

username: string;
constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
        this.username = params.username; // same as :username in route
    });
    // using username call the BE api and fetch data
}

有关路由参数的更多信息，请访问https://angular.io/guide/router#route-parameters

如果您想根据授权路由到页面，请使用 authGuards。 https://angular.io/guide/router#canactivate-requiring-authentication