Angular 14+中的路由器实用函数

这篇文章介绍了Angular v14以来在开发者预览版中提供的一些新的路由器实用工具函数。

你可能对语法很熟悉:

进口:[
RouterModule.forRoot([
{path: 'crisis-list'，组件:CrisisListComponent}，
{path: 'heroes-list'， component: HeroesListComponent}，
])
］

现在，我们可以用以下语句替换该语法:

供应商:[
provideRouter([
{path: 'crisis-list'，组件:CrisisListComponent}，
{path: 'heroes-list'， component: HeroesListComponent}，
])
］

如果你想知道“为什么”Angular团队现在要把这些函数添加到框架中，简单的回答是，这一切都归结于Angular框架在Angular 14中增加的主要功能:独立的组件．由于这些新功能，独立组件可以在没有任何模块的情况下工作，路由器也可以。

为什么要使用这种新语法?

这种函数方法不仅仅是语法糖。当我们使用路由器函数时，我们没有加载RouterModule，这意味着我们支持改进的代码摇树。因此，我们的应用程序中只包含了我们需要的路由器功能，而没有其他功能。

你可以在Angular团队的官方解释在这里该公司报告称，使用这些新函数时，路由器代码的包大小提高了11%。

有其他功能可用于此目的。例如:

供应商:[
provideRouter (appRouteswithPreloading (PreloadAllModules)）
］

还可以使用函数而不是类来改进警卫。

例如，下面的语法适用于Angular 14+。注入服务、调用方法并返回结果的一行代码:

Const route = {
路径:“管理”,
canActivate:(() => inject(AdminService).isUserBoss()］
}；

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

Const route = {
路径:“编辑”,
组件:EditCmp,
canDeactivate:【
(component: EditCmp) =>component.hasSavedChanges
］
}；

这些特性在Angular v14.2+中可用。注意，它们都在开发者预览版，这意味着API在未来可能会有一些变化，特别是这些函数的名称和参数，但底层特性将保持不变。

我叫betway必威滚球．我是Angular的谷歌开发专家，也是角训练在那里我帮助web开发团队学习并熟悉Angular。

如果您在网页开发方面需要任何帮助，请随时与我们联系!

如果你喜欢这篇文章，请鼓掌或分享。你的帮助我永远感激。你也可以点击此处订阅Medium．