Question

在我的应用程序中，我想知道我的导航路线中有一个参数，我需要配置此路线。

我有一个不应在<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>输出中呈现此组件，因为该组件在屏幕的一角可见，因此两次呈现该组件在我的应用程序中。

我需要一种无需在应用程序根屏幕的中央呈现组件即可获取参数的方法。

Answer 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

用于读取联系人ID参数的代码

获取URL参数ActivatedRoute Angular

1 个答案: