Angular: Как открыть детали компонента и передать идентификатор на ButtonClick

Question

У меня есть компоненты List и Details в проекте Angular (v7), и я открываю детали записи, используя следующий подход:

ListComponent.html:

<a routerLink="/details/" [state]="{ id: row.Id }">{{ row.Title }}</a>

DetailsComponent.ts:

import { Router, ActivatedRoute } from '@angular/router';

export class DetailsComponent {

    constructor(private router: Router,
        public activatedRoute: ActivatedRoute {
        super();

        this.id = this.router.getCurrentNavigation().extras.state.id; //get id parameter
    }
}

Я столкнулся с двумя проблемами, которые необходимо исправить:

1) Мне нужночтобы остаться на той же странице сведений при обновлении страницы.

2) Я хочу открыть страницу сведений для записи с помощью нажатия кнопки, например, добавив параметр id к адресу страницы сведений.

Можно ли разумно исправить эти 2 проблемы в Angular 7?

Answer 1

Вы должны добавить id в качестве параметра маршрутизатора в URL.И создайте в вашем routing-module новый маршрут, который соответствует компоненту detail.

Вы можете увидеть это здесь в официальной документации, где они реализуют представление списка / сведений с маршрутизацией.

В основном это было бы так

<a routerLink="/details/{{row.Id}}">{{ row.Title }}</a>

и

import { Router, ActivatedRoute } from '@angular/router';

export class DetailsComponent {

    constructor(private router: Router,
        public route: ActivatedRoute) {
        super();

        this.id = this.route.snapshot.paramMap.get('id'); //get id parameter
    }
}