如何在包含RouterOutlet的HTML模板中直接使用已激活路由的数据？

Question

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

目标

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

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

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（或与此相关的任何定义的数据）：

<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是：

  

A service that is provided to each route component

并且包含router-outlet的组件不是路由组件。

研究

我搜索了该网站，发现以下问题讨论了一个非常相似的问题：

How can I access an activated child route's data from the parent route's component?

Get route data outside the router outlet

Access activated route data from some other component

Accessing Route data in root component, route data is empty

Angular ActivatedRoute data returns an empty object

但是，在我的案例中，重点是在HTML模板中直接使用路线数据，因此，这两种可能的解决方案都不适合（如How To Get Route Path Parameters In Non-Routed Angular Components所述）：< / p>

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

---

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

Answer 1

解决方案

我建议您使用template variable reference，如文档所示：

  

#myTemplateVar="outlet"

然后，您可以通过<router-outlet>的{​​{3}}属性访问路线数据，并在HTML模板中使用它，如下所示：

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

示例

我在activatedRouteData: Data上为您准备了一个简单的示例，以演示建议的解决方案。

结果

结果如下所示（其他路线/组件也是如此）：

Stackblitz