路由器在角14 +实用函数

发表在
3分钟阅读 2022年10月26日,

- - -

这篇文章说明了一些新的路由器效用函数角度发掘以来开发者预览版中可用。

你可能熟悉的语法:

进口:[
RouterModule.forRoot([
{路径:“crisis-list”,组件:CrisisListComponent},
{路径:“heroes-list”,组件:HeroesListComponent},
])
]

我们现在可以取代的语法:

供应商:[
provideRouter([
{路径:“crisis-list”,组件:CrisisListComponent},
{路径:“heroes-list”,组件:HeroesListComponent},
])
]

如果你想知道“为什么”角团队现在这些功能添加到框架,简短的回答是,所有这一切都归结到角的主要角框架之外14:独立的组件。独立的组件可以工作没有任何模块,所以可以路由器由于这些新功能。

为什么要使用新语法吗?

这个函数的方法是更多的不仅仅是语法糖。当我们使用路由器的功能,我们不加载RouterModule,这意味着我们能够改善tree-shaking我们的代码。因此,仅包括路由器功能我们需要在我们的应用程序,而不是其它。

你可以找到的角团队的官方解释报告11%包大小提高路由器的代码在使用这些新功能。

如何启用额外的路由器的配置与功能?

其他功能可用专为目的。例如:

供应商:[
provideRouter (appRouteswithPreloading (PreloadAllModules))
]

其他功能包括:withDebugTracing,withDisabledInitialNavigation,withEnabledBlockingInitialNavigation,withInMemoryScrolling,withRouterConfig

你可以找到的这种路由器效用函数的完整列表

保安呢?

保安也可以改善使用功能,而不是类。

例如,以下语法适用于角14 +。一行代码注入一种服务,调用一个方法,并返回它的结果:

const路线= {
路径:“管理”,
canActivate:(()= >注入(AdminService) .isUserBoss ()]
};

如果这还不够让人印象深刻,我们甚至可以访问当前组件的上下文来禁用导航使用以下语法——不需要的服务:

const路线= {
路径:“编辑”,
组件:EditCmp,
canDeactivate:【
(组件:EditCmp) = >component.hasSavedChanges
]
};

这些特性在角v14.2 +。注意他们开发者预览版API,这意味着将来可能会改变一点,特别是这些函数的名称和参数,但潜在的功能将保持不变。

我的名字是betway必威滚球。我是谷歌开发者角度,专家顾问和教练角训练我帮助web开发团队学习和熟悉角。

如果你需要任何帮助web开发,随时取得联系!

如果你喜欢这篇文章,请为它鼓掌或分享它。我总是感激你的帮助。你也可以订阅中这里

- - -

- - -

Baidu
map