如何在包含RouterOutlet的HTML模板中直接使用已激活路由的数据? [英] How to use the activated route's data DIRECTLY in the HTML template containing the RouterOutlet?

问题描述

这花了我一段时间，所以我希望通过以SO的Q& A方式共享解决方案来节省某人的时间.在这里:

我有一个Angular8 Web应用程序，在其中我使用 RouterModule 在组件之间导航

I have an Angular8 web application, where I use the RouterModule to navigate between the components.

这是我的路线的定义方式:

Here is how my routes are defined:

const routes: Routes = [
    { path: 'moo', component: AppMooComponent, data: { title: 'Moo Section', desc: 'Moo is the first example component.' } },
    { path: 'boo', component: AppBooComponent, data: { title: 'Boo Section', desc: 'Boo is the second example component.' } },
    { path: 'foo', component: AppFooComponent, data: { title: 'Foo Section', desc: 'Foo is the third example component.' } },
    { path: '', redirectTo: 'moo', pathMatch: 'full' },
];

我希望能够通过以下方式在我的HTML模板中使用data.title和data.desc(或与此相关的任何定义的数据):

I would like to be able to use data.title and data.desc (or any defined data for that matter) in my HTML template in the following way:

<ul>
    <li><a [routerLink]="['moo']">Moo</a></li>
    <li><a [routerLink]="['boo']">Boo</a></li>
    <li><a [routerLink]="['foo']">Foo</a></li>
</ul>
<hr>
<h1>{{<something>.data.title}}</h1>
<p>{{<something>.data.desc}}</p>
<hr>
<router-outlet></router-outlet>

问题

注入ActivatedRoute来获取数据无效，因为ActivatedRoute是:

Problem

Injecting ActivatedRoute to get the data does not work, because ActivatedRoute is:

为每个路由组件提供的服务

和包含router-outlet的组件不是路由组件.

and the component, containing the router-outlet is not a route component.

我已经搜索了该站点，发现了以下问题，它们讨论的是一个非常相似的问题:

I have searched the site and found the following questions discussing a very similar problem:

如何我可以从父路线的组件访问已激活的子路线的数据吗?

在路由器出口外获取路由数据

从其他组件访问已激活的路由数据

在根组件中访问Route数据，即路由数据是空的

Angular ActivatedRoute数据返回空对象

但是，在我的案例中，重点是在HTML模板中直接使用路线数据，因此，这两种可能的解决方案都不适合(如

However, in my case the emphasize is on direct usage of the route's data in the HTML template, so neither of those possible solutions is suitable (as summarized in How To Get Route Path Parameters In Non-Routed Angular Components):

• 将未路由的组件移到路由组件内部
• 使用路由器导航事件
• 创建附加服务以保留路径参数状态并使其可用于所有其他感兴趣的组件

如何以所需的方式实现这一目标?

How to achieve that in the desired way?

推荐答案

解决方案

我建议您使用模板变量引用，如图所示在文档中:

Solution

I would suggest you to use a template variable reference as shown in the documentation:

#myTemplateVar="outlet"

然后，您可以通过 activatedRouteData: Data 属性访问路由数据>并在HTML模板中像这样使用它:

Then you can access the route's data via the activatedRouteData: Data property of <router-outlet> and use it in the HTML template like this:

<h1>{{myTemplateVar.activatedRouteData.title}}</h1>
<p>{{myTemplateVar.activatedRouteData.desc}}</p>
<hr>
<router-outlet #myTemplateVar="outlet"></router-outlet>

示例

我已在 Stackblitz 上为您准备了一个简单示例，以进行演示建议的解决方案.

Example

I have prepared a simple example for you on Stackblitz in order to demonstrate the proposed solution.

结果如下所示(其他路线/组件也是如此):

Here how the result looks like (it is similar for the other routes/components):

这篇关于如何在包含RouterOutlet的HTML模板中直接使用已激活路由的数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！