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

问题描述

这个我花了一段时间才弄明白，所以我希望通过在 SO 的问答方式中分享解决方案来节省别人的时间.在这里:

目标

我有一个 Angular8 Web 应用程序，我使用

This one took me a while to figure out, so I hope to save someone's time by sharing the solution in the SO's Q&A way. Here it goes:

Goal

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' },
];

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>

Problem

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

A service that is provided to each route component

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

Research

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

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

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):

• Moving the non-routed component inside of the routed component
• Using router navigation events
• Creating an additional service to hold the route path param state and make it available for all other interested 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"

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>

Example

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

Result

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

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