Получить параметр URL ActivatedRoute Angular

В моем приложении, чтобы я знал, что в моем маршруте навигации есть параметр, мне нужно настроить этот маршрут.

У меня есть компонент, который не должен отображаться в <router-outlet>.

Этот компонент представляет собой панель, которая находится в углу экрана для отправки и получения сообщений.

const routes: Routes = [
    {
        path: 'chatView/:contactId',
        component: ChatPanelComponent,
        resolve: {
            chat: ChatPanelService
        },
        canLoad: [GuardService],
    },
];

Таким образом визуализируйте мой компонент в центре экрана, и я не хочу, чтобы это происходило.

В модуле, который я настроил так, чтобы при доступе к маршруту с помощью "chatView /: contactId" я получал параметр для возврата данных этого контакта при загрузке приложения.

В моем компоненте:

    ngOnInit(): void {

        this._activatedRoute.params.subscribe((params: any) => {
            if (params.contactId){
               this._chatPanelService.getContato(params.contactId).then((contact) => {
                   this.toggleChat(contact);
               });
            }
        });
}

Я хотел бы знать, есть ли способ получить этот параметр без необходимости визуализировать этот компонент в выводе <router-outlet>, потому что этот компонент виден в углу экрана и, таким образом, визуализирует компонент дважды в моем приложении.

Мне нужен способ получить параметр без рендеринга компонента в центре корневого экрана приложения.

Просто предположение ... больше похоже на ошибку дизайна, чем на проблему маршрутизации. Какую проблему вы на самом деле пытаетесь решить? Может быть где-то щелкнуть и панель должна загрузиться / открыться?

ramden 09.08.2018 00:57

У меня есть компонент в левом углу экрана, который является Messenger моего приложения ... Когда я запускаю маршрут localhost: 4200 / chatView / contactId, он должен запустить приложение с открытым Messenger.

Luiz 09.08.2018 01:03

Этот компонент Messenger загружается внутри HTML.

Luiz 09.08.2018 01:04
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
3
552
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Предположим, что все это происходит в компоненте «Панель инструментов» (или как там назван ваш родительский компонент), Вы должны создать 2 маршрута, оба указывают на "DashboardComponent"

const routes: Routes = [
{
    path: 'dashboard',
    component: DashboardComponent,
    resolve: {
        chat: ChatPanelService
    },
    canLoad: [GuardService],
},
{
    path: 'dashboard/:contactId',
    component: DashboardComponent,
    resolve: {
        chat: ChatPanelService
    },
    canLoad: [GuardService],
},
];

Тогда вы бы использовали свой

this._activatedRoute.params.subscribe

код для чтения параметра идентификатора контакта

Другие вопросы по теме