Угловые 7 - 8 динамических маршрутов

Question

У меня есть приложение Angular, которое должно создавать новые маршруты в зависимости от пользователей. Допустим, пользователь регистрируется как «johndoe», а затем приложение должно создать маршрут: domain / johndoe. Конечно, маршрут / johndoe должен содержать некоторую информацию о конкретном пользователе (например, имя, изображение и т. Д.). Я использую Google Cloud Hosting и Firestore в качестве серверных решений, и до сих пор мой прогресс заключался в том, чтобы внедрить Маршрутизатор в мой конструктор AppComponent, а затем использовать функцию «unshift» в router.config. Это работает, но мне нужно было бы хранить все новые маршруты («пользователи») в моей базе данных в отдельном файле, а затем запрашивать базу данных каждый раз, когда кто-то переходит к частной роли (например, домен / 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 = param.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

Надеюсь, это поможет ...