获取 URL 参数 ActivatedRoute Angular

Question

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

我有一个组件不应在 <router-outlet> 中呈现。

此组件是一个位于屏幕角落的面板，用于发送和接收消息。

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

这种方式将我的组件呈现在屏幕中央，我不希望这种情况发生。

在我配置的模块中，当我使用 "chatView /: contactId" 访问路由时，我收到一个参数 return 加载我的应用程序时该联系人的数据。

在我的组件中：

    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

让我们假设这一切都发生在组件 "Dashboard" 中（或者你的父组件被命名），您将创建 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

get URL parameter ActivatedRoute Angular

angular

angular-ui-router