Angular 15有什么新特性?

Angular 15于2022年11月初发布。这个版本带来了很多新特性，比我们以前使用的Angular主要版本都要多。

让我们一个一个地深入研究一些重要的新功能:

指令组合API

在Angular 15之前，我们可以使用继承来创建一个扩展另一个指令的指令。虽然继承可以工作，但使用复合通常会更灵活，这正是Angular 15允许我们做的。

这是怎么做到的呢?如果我们想要创建一个自动应用一个或多个其他指令的组件或指令，我们可以使用以下语法:

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

在上面的例子中，指令MenuBehavior总是应用于AdminMenu组件，不需要向组件的宿主HTML元素添加任何选择器。

甚至可以使用以下语法将输入和输出转发到这些指令:

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

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

结果，AdminMenu组件可以这样使用:

如你所见，这个MenuBehavior指令在HTML中不“可见”。所以不需要额外的选择器。

完整的文档可以在这里找到更多关于指令组合API．

稳定的独立api

的Angular 14中引入的独立组件API作为一个开发人员预览现在完全稳定和开发人员预览。

注意，你可以用新的Angular CLI选项生成一个独立的组件:

MyComponent——独立的

这个特性完全支持无模块的Angular应用。例如，我们可以使用以下语法的独立组件引导这样一个应用程序:

bootstrapApplication (MyStandaloneAppComponent);

这种变化的另一个后果是可以在没有模块的情况下进行惰性加载。相反，我们可以使用下面的语法惰性加载一堆路由:

export const appRoutes: Routes = [{
路径:“懒”,
loadChildren: () => import('./lazy/lazy.routes')
.then(routes => routes. lazyroutes)
});

与lazyRoutes在lazy.routes.ts像这样:

import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
import {LazyDashboardComponent} from './lazy-dashboard.component';

export const lazyRoutes: Routes = [
{path: "，组件:LazyComponent}，
{path: 'dashboard'，组件:LazyDashboardComponent}，
];

不涉及模块!