角15 2022年11月初发布。这个版本带来了很多新特性,我们多被用于与先前的角的主要版本。

让我们深入了解一些重要的新特性的一个接一个:

指令构成API

角15日之前,我们可以使用继承来创建一个扩展另一个指令。而继承的作品,更灵活的使用构成相反,这正是角15允许我们做什么。

这是如何工作的呢?如果我们想要创建一个组件或指令,自动拥有一个或多个其他指令应用,我们可以使用下面的语法:

@ component ({
选择器:“管理页面”,
模板:“admin-menu.html”,
hostDirectives:(MenuBehavior),
})
出口类AdminMenu {}

在上面的示例中,该指令MenuBehavior总是被应用到AdminMenu组件,不需要添加任何选择器组件的HTML元素。

它甚至可以输入和输出转发给这些指令使用下面的语法:

@ component ({
选择器:“管理页面”,
模板:“admin-menu.html”,
hostDirectives: [{
指令:MenuBehavior,
输入:[' menuId: id '),
输出:“menuClosed:关闭”,
}),
})
出口类AdminMenu {}

上面的代码意味着id属性管理页面元素变成了menuId输入的MenuBehavior指令。同样,关闭的输出管理页面元素变成了menuClosed的输出MenuBehavior。

结果,AdminMenu组件可以使用如下所示:

<管理页面id = " top-menu”(关闭)=“logMenuClosed () " >

正如你所看到的,MenuBehavior指令不是“可见的”HTML。所以不需要额外的选择器。

完整的文档的更多信息可以在这里找到指令构成API。

稳定独立的api

的独立的组件API中引入角14作为一个开发者预览版已经完全稳定的开发者预览版。

注意,您可以生成一个独立的组件与新角CLI选择:

ng g MyComponent组件添加——独立

这个特性完全使module-less角应用程序。例如,我们可以引导这样的应用程序使用一个独立的组件使用下面的语法:

bootstrapApplication (MyStandaloneAppComponent);

这一变化的另一个后果是可以没有延迟加载模块。相反,我们可以延迟加载很多航线使用下面的语法:

出口const appRoutes:路线= [{
路径:“懒”,
loadChildren:() = >进口(“。/懒惰/ lazy.routes”)
不要犹豫(路线= > routes.lazyRoutes)
});

与lazyRoutes被宣布lazy.routes.ts像这样:

从@angular /路由器的进口{路线};
进口{LazyComponent}”。/ lazy.component ';
进口{LazyDashboardComponent}”。/ lazy-dashboard.component ';

出口const lazyRoutes:路线= (
{路径:“组件:LazyComponent},
{路径:“仪表板”,组件:LazyDashboardComponent},
];

不涉及模块!

图像优化指令(NgOptimizedImage)

图片是至关重要的,当它涉及到任何web应用程序的性能。但不幸的是,我们可以尝试优化Javascript代码并保存kb,只看到我们的努力被大规模破坏图片花了太多时间去下载。

图像指令旨在帮助。

它所做的:

• 聪明的延迟加载:图片看不见的用户在页面加载后,用户向下滚动到页面加载部分。
• 优先级重要的图片:首先加载必要的图像(例如标题横幅)
• 形象优化配置工具:如果您正在使用一个CDN,指令将自动选择合适的图像大小CDN,优化下载大小基于多少像素的图像将显示在屏幕上。
• 内置的错误和警告:除了上面的内置的优化中,指令也有内置的检查,以确保开发人员推荐的最佳实践在图像标记。

的指令可以使用ngSrc属性而不是src:

< img ngSrc = "形象。png " >

的NgOptimizedImage指令是@的一部分角/常见模块,就像ngFor和ngIf,所以它已经工具包的一部分如果你使用这些指令。

它也可以被用作独立的指令没有进口CommonModule。它的官方文档和更多信息背后的魔力,指令可以在这里找到。

更快更好的堆栈跟踪调试

堆栈跟踪调试代码更快至关重要。所以角团队一直致力于以更多方式错误和堆栈跟踪更集中,明确的和相关的。

堆栈跟踪,包括区。js,不帮助我们我们编写的代码:

角,只有相关的部分目前的堆栈跟踪显示:

很快,它会得到更好的,与上面的最后一行被替换为:

在<按钮(点击)= " submit ()" > (app.component.html: 4)

这样,我们立刻就会知道这行代码引发了这个问题。

角CDK列表框

有几种方法可以使用HTML创建下拉,选择项列表,从选择使用标签完全自定义选项div或ul和李。

我们获得的定制(样式、验证规则)通常成为损失的可访问性。

通过使用@angular / cdk /列表框,我们得到的所有预期的行为易访问的经验,包括双向布局支持、键盘交互,并集中管理:

一些例子可以在这里找到。

语言服务改进

角语言服务精益求精,所有开发人员转化为更好的IDE体验。

角15了自动组件进口当一个组件用于第一次和没有进口前(作为一个独立的组件或模块)。

功能的路由器警卫

这行代码改变我们思考的方式路由器警卫在角:

const路线= {
路径:“管理”,
canActivate:[() = >注入(LoginService) .isLoggedIn ())
};

不需要创建一个特定的类,它实现了canActivate接口。一个简单的函数可以做现在这份工作!

同样,延迟加载与独立的组件在组件级别可以使用下面的语法:

{
路径:“懒”,
loadComponent:() = >进口(“。/ my.component”) (m = > m.MyComponent),
}

上面的例子中可以进一步简化组件定义时默认导出的文件。这就是所谓的auto-unwrap短和结果在以下配置:

{
路径:“懒”,
loadComponent:() = >导入(’。/ my.component '),
}

日期的默认格式选项管道

最后,因为大多数应用程序使用一个一致的日期格式全屏幕和组件,我们现在可以定义默认格式一劳永逸地用一个新的注射标记DATE_PIPE_DEFAULT_OPTIONS:

供应商:[
{
提供:DATE_PIPE_DEFAULT_OPTIONS,
useValue: {dateFormat:“shortDate”}
}
]

从角团队官方发布更多的信息可以在这里找到:https://blog.angular.io/angular-v15-is-now-available-df7be7f2f4c8

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

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

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