插件窝 干货文章 Angular 和 15 的改进

Angular 和 15 的改进

使用 导入 angular strong 686    来源:    2024-10-20

1) 在 angular 14 中注入服务,无需使用注入构造函数。
以前,注入任何服务总是需要具有构造函数的类:

class myclass {
  constructor(private myservice: myservice) {}
}

现在,我们可以在函数和类中注入服务。我们只需要声明一个变量并将其设置为等于注入其中的服务名称:

const myservice = 注入(myservice);
这很有用,例如,在拦截器和防护中,它们现在通常使用函数而不是类来完成。

2) 在 angular 15 中用于保存行的自关闭标签。
从这个版本开始,您可以使用带有单个标签的组件:

之前,需要打开和关闭组件标签才能使用它:

3) 通过创建快捷方式减少 angular 中的导入。
而不是像这样长时间导入:

从 '../../components/my-component' 导入 { mycomponent };
您可以像这样缩短导入:

从 '@components/my-component' 导入 { mycomponent };
要实现此目的,请转到 tsconfig.json 文件并在 compileroptions 属性下添加路径。在路径内部,您可以配置自己的导入快捷方式:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

建议,如果您在某个组件内并且想要使用该组件特定的内容,请使用 ./ 相对导入它以访问该资源。但访问父文件夹时,请使用@快捷方式。如果出现问题,您可能需要关闭并重新打开 visual studio code。这些小细节对于保持代码尽可能有条理非常重要。

4) 使用 angular 15 中的 ngoptimizedimage 指令优化图像加载。
如果我们有一个包含 15 个图像的列表,并通常使用 [src] 迭代它们,我们将面临应用程序启动时一次加载所有 15 个图像的问题,这会降低性能:

Angular 和 15 的改进
为了解决这个问题,angular 提供了 ngoptimizedimage 指令。要使用它,只需导入它:

从 '@angular/common' 导入 { ngoptimizedimage };
并使用 [ngsrc] 而不是 [src]。这将延迟加载图像,从而提高性能。然而,该指令还有许多其他配置。如果您只想延迟加载,我建议使用loading =“lazy”属性,该属性是html标准的一部分,并且与所有浏览器兼容:

Angular 和 15 的改进

建议:如果菜单顶部有主图像,请勿将其设置为延迟加载,因为它将在应用程序打开时第一个加载。仅将此应用于可能出现在滚动下方的图像,因为我们不需要立即加载它们。

这对于公共应用程序非常重要,例如需要良好 seo 的 ssr 应用程序,因为它有助于提高性能。

— 基于 efisiodev 的 angular 课程的笔记 —