What's new in @this-dot@route-config v1.2
source link: https://dev.to/thisdotmedia/whats-new-in-this-dotroute-config-v12-f3k
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Recently, we introduced our first open source library to have easier access to RouterModule
config's data
property. If you haven't read about it yet, I recommend reading my colleague’s introductory blog post.
Since the first release, we received great feedback from the community, and we've been working on improving the developer experience using it. In this article, I'd like to share with you the new features we've introduced, and how to use them.
RouteDataDirective (*tdRouteData
)
One of the new features we've introduced is a directive for directly accessing the current route data property from within the component's template. This is a structural directive that binds the whole data property to the local variable we define. To use it, we need to add a *tdRouteData
directive attribute to a tag that we want in order to use some route's defined properties.
<div *tdRouteData="let routeData">
<h1>{{ routeData.pageTitle }}</h1>
</div>
In the routeData
, we have access to the whole data property (along with all the properties from the data
properties defined in parent routes).
Given the following router configuration, we will display the correct title depending on the subpage we're currently on.
@NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: Example1Component,
children: [
{
path: 'first',
component: FirstComponent,
data: {
title: ['First component'],
},
},
{
path: 'second',
component: SecondComponent,
data: {
title: ['Second component'],
},
},
{
path: '**',
pathMatch: 'full',
redirectTo: 'first',
},
],
},
]),
],
})
export class Example1Module {}
If you need to use multiple route properties within one component's template, it is recommended to only use *tdRouteData
on one root tag (or ng-container
in case your template doesn't have one top-level element). This way we only create one subscription to route's data per template.
<ng-container *tdRouteData="let routeData">
<h1>{{ routeData.pageTitle }}</h1>
<ul *ngFor="let item of routeData.someRouteItems">
<li>{{ item }}</li>
</ul>
</ng-container>
RouteDataHasDirective (*tdRouteDataHas
)
The second new feature we've introduced is a directive similar to *tdRouteTags
directive we've already shown in the previous article. The big difference is more configuration options. The new *tdRouteDataHas
directive allows the developer to configure the property that this directive is using to determine which template to show. We can configure this via the tdRouteDataHasPropName
input (or just propName
using shorthand syntax). Let's see it in action.
<p *tdRouteDataHas="'showParagraphTag'; propName: 'customRouteTagsProp';">
Go to first
</p>
Given the following router configuration, we will display the paragraph only on the first
route, and not on the second
route.
RouterModule.forChild([
{
path: '',
component: Example2Component,
children: [
{
path: 'first',
component: FirstComponent,
data: {
customRouteTagsProp: ['showParagraphTag'],
},
},
{
path: 'second',
component: SecondComponent,
data: {
customRouteTagsProp: [],
},
},
{
path: '**',
pathMatch: 'full',
redirectTo: 'first',
},
],
},
]);
Summary
This concludes the new features we've added since the first release. I would like to thank all the people that provided us with suggestions for those features! We're constantly looking for ways to improve our libraries, and encourage you to let us know about any questions or feature requests via an issue on our repository.
If you want to play with the new features, please have a go at this Stackblitz example.
In case you have any questions, you can always tweet or DM me at @ktrz. I'm always happy to help!
This Dot Labs is a development consultancy focused on providing staff augmentation, architectural guidance, and consulting to companies.
We help implement and teach modern web best practices with technologies such as React, Angular, Vue, Web Components, GraphQL, Node, and more.
Recommend
-
126
"dotfiles" and system configuration These dotfiles are affectionately dedicated to the vi editor originally created by Bill Joy, with whom I have spent many pleasant evenings
-
102
-
137
dot-osk/monitor_ctrl: DDC/CI master
-
31
Dot Dot Considered Harmful Child processes on Fuchsia are only capable of accessing the resources provided to them -- this is an essential idea encompassing microkernels, and other “capability-based” systems. I...
-
53
graphviz是一个用特殊的文本语言来生成图片的应用,可以生成有向图和无向图。dot就是那个特殊的文本语言。 dot大概长这样: graph { a -- b; c -- d; } 生成图片: $ dot -Tpng -o dot...
-
65
README This project contains my dotfiles. Hello World.
-
10
Dot-com bubble From Wikipedia, the free encyclopedia Jump to navigation
-
15
Files Permalink Latest commit message Commit time
-
8
1xBit Introduces DOT Coin as a New Betting Currency – CryptoMode Search Bitcoin Press Release: Leading online crypto gambling platform, 1xBit, has added a ne...
-
3
5720 members Technology The latest news, reviews and features from the digital and analog world.
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK