Angular 14有什么新功能?< / h1 >

Angular 14在几周前发布了。新的框架版本包含了开发人员要求了一段时间的相当多有趣的特性。< / p >

让我们逐一探讨这些新的主要功能。< / p >

输入形式< / h1 >
在用Angular 14+创建表单时，会在所有可用的类和方法中保存和检查类型信息。< / p >
这意味着我们的ide现在可以帮助我们更多:< / p >

在不同场景中实现智能自动补全的类型化表单说明

关于这个特性最好的消息是，它不需要开发人员进行任何工作或代码更新。api保持不变。我们刚在上面做了类型检查!< / p >

独立组件(开发人员预览)< / h1 >

独立组件是在Angular中创建无模块组件、管道和指令的一种新方法。< / p >

的声明数组中不必列出这样的类ngModule．< / p >

下面是一个独立组件的例子:< / p >

@ component ({
独立:没错,
选择器:“你好”,
模板:
<标题>你好{{名称}}!< / h1 >
'})
导出HelloComponent类
@Input()名称:字符串;
｝

正如您在上面的例子中看到的，要拥有一个独立的组件，只需要添加选项独立:真到组件装饰器，它也与指令和管道一起工作。< / p >

独立组件的唯一缺点是它们不从模块继承任何依赖项，因为它们没有任何依赖项。< / p >

因此，必须列出依赖项并导入到组件选择器中:< / p >

@ component ({
独立:没错,
选择器:“你好”,
导入:[ReactiveFormsModule, OtherChildComponent]，
模板:
<标题>你好{{名称}}!< / h1 >
< p >
输入你的名字:

< / p >
”,
})
.．.

该特性仍处于开发者预览阶段，Angular团队警告我们，API仍然可以更改，但独立的组件仍然可以使用。< / p >

想了解更多有关该功能的信息，请点击官方指南链接:https://angular.io/guide/standalone-components

路由配置中的页标题< / h1 >

这是一个很小的变化，但非常有用。现在，我们可以在路由配置中为Angular路由添加一个标题选项。这样的标题将被路由器接收，并在导航到该页面时用作页面标题:< / p >

导出const路由:routes = [{
路径:“回家”,
组件:ExampleComponent,
标题:“主页”，
}, {
路径:“你好”,
组件:HelloComponent,
标题:'Hello Component'，
});

绑定到受保护的组件成员< / h1 >

这是我最喜欢的变化之一。在Angular 14之前，我们必须创建一个类属性公共在组件的HTML模板中使用它。< / p >

在v14中，我们现在可以创建这样的属性受保护的，这当然是更多的。私人“比”公共，结果，一个非常好的主意:< / p >

@ component ({
选择器:“组件”,
模板:{{message}}'， //现在编译!
})
导出类MyComponent {
受保护的消息: string = 'Hello world';
｝

所有这些更新都在起作用Stackblitz例子：< / p >