Как сделать роутинг для разных групп на их страницу?

Question

[ArthurHlushko]

Есть страничка, где я могу создавать групы /groups, нужно сделать так, чтобы при клике на групы происходил роутинг на /groups/(имя групы), как можно это сделать?
html

<app-header></app-header>
<section class="section-groups">
    <div class="container">
        <div class="main-page-wrap">
            <div class="groups_list fl-r">
                <div *ngFor="let group of us.data.groups" class="groups_wrap">
                    <div class="groups_item">
                        <a (click)="toGroup($event)" class="groups_card">
                            <div class="groups_img">
                                <img src="/assets/img/groups/shopping.png" class="{{group}}" alt="">
                            </div>
                            <div class="groups_text">
                                <p>{{group}}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service'
import { Router } from '@angular/router'

@Component({
	selector: 'app-groups',
	templateUrl: './groups.component.html',
	styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

	constructor(public us: UserService, private router: Router) { }

	toGroup(event) {
		// this.router.navigate(['/groups/friends/', event.target.className])
	}

	ngOnInit(): void {
	}

}

Comments

[Роман]

Это можно сделать миллионом способов. Может все таки покажите свой код, чтобы хот немного сузить количество вариантов?

[ArthurHlushko]

html

<app-header></app-header>
<section class="section-groups">
    <div class="container">
        <div class="main-page-wrap">
            <div class="groups_list fl-r">
                <div *ngFor="let group of us.data.groups" class="groups_wrap">
                    <div class="groups_item">
                        <a (click)="toGroup($event)" class="groups_card">
                            <div class="groups_img">
                                <img src="/assets/img/groups/shopping.png" class="{{group}}" alt="">
                            </div>
                            <div class="groups_text">
                                <p>{{group}}</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { UserService } from '../../services/user.service'
import { Router } from '@angular/router'

@Component({
	selector: 'app-groups',
	templateUrl: './groups.component.html',
	styleUrls: ['./groups.component.scss']
})
export class GroupsComponent implements OnInit {

	constructor(public us: UserService, private router: Router) { }

	toGroup(event) {
		// this.router.navigate(['/groups/friends/', event.target.className])
	}

	ngOnInit(): void {
	}

}

[Роман]

ArthurHlushko, возможно теперь кто нибудь ответит

Answer 1

[Антон Швец]

<a [routerLink]="['/', 'groups', group]" class="groups_card">

вопрос это шутка была, да? :)))

Comments

[ArthurHlushko]

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'groups/123'
Error: Cannot match any routes. URL Segment: 'groups/123'

[Антон Швец]

ArthurHlushko, https://angular.io/guide/router#route-parameters
азы же

[Антон Швец]

ArthurHlushko, пользуясь случаем хочу попиарить перевод доки на русский язык
https://angular24.ru/

[Station 72]

Антон Швец, Работа сайта временно приостановлена
Хостинг сайта временно приостановлен