Nested routing for an online store on Angular 9 + ng-universal, how to organize?

Question

Angular

Good day, dear developer friends. In general, you need to implement the nesting of routing correctly, the point is that a person will add categories using the admin panel. And accordingly, I somehow need to make dynamic routing like:

vash-domen.ru/glavnaya-categotiya-1/tovar-1
vash-domen.ru/glavnaya-categotiya-2/tovar-1
vash-domen.ru/glavnaya- categotiya-1/podcategoriya-1/tovar-1 vash-domen.ru/glavnaya-categotiya-2/podcategoriya-3/tovar-1 I
use



:
Angular 9;
@nestjs/ng-universal

The question is how to do it and do it well from Angular point of view, thanks in advance for your help :)

Answer 1

I was also looking for an answer to this question, but I did not find any solution out of the box. I ended up doing this:
Routing:

const routes: Routes = [
    {
        path: 'category', component: LayoutShopComponent, children: [
            {path: '**', component: CategoryListComponent},
        ]
    },
];

In the component itself, I subscribe to the url change, and from the url I already get the current category, something like this:

constructor(
        private route: ActivatedRoute
    ) {
        route.url.subscribe((data) => {
            this.child = data.map(value => value.path);
            const arraySize = data.length;
            if (arraySize > 0) {
                this.parentSlug = data[arraySize - 1].path;
            }
        });
        this.loadData();
    }

And in html we just go by category:

<a routerLink="{{category.slug}}" class="text-body">{{category.name}}</a>

Perhaps there are better solutions, but it was not possible to find.