Angular 6 发生了哪些更改

首先

我会在这个从4月开始参与的开发中使用Angular 6,并记录下我发现的一些事情。这不是关于令人兴奋的新功能介绍,而是与尝试做一些更基本的事情有关。

尽管计划于2018年4月4日发布的Angular 6尚未在2018年5月3日发布,但此处记录的是6.0-rc5版本的信息。

如果我再有任何注意到的事情,我会添加在后面。

根目录所属的服务

如果使用以下方法生成服务,该服务将归属于根目录,而不是app模块。

$ ng generate service ../services/hoge
CREATE src/services/hoge.service.spec.ts (405 bytes)
CREATE src/services/hoge.service.ts (140 bytes)

属于此根目录的所有服务都可以从所有模块中使用,并且不需要在模块中注册。

以下是中文翻译:

在@Injectable中加入了新的参数providedIn,可以指定从哪个模块添加。
如果设为 ‘root’ ,则无需在模块中注册即可进行依赖注入。
值得注意的是,属于root的服务将在所有模块中共享同一个实例(即单例)。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class HogeService {

  constructor() { }
}

RxJS 6.0 –> RxJS 6.0 版本

Angular 6.0 采用了 RxJS 6.0。
导入方式发生了完全变化 Σ(・□・;)
请参阅以下文章以获取详细说明。

RxJS 6.0版本的变更总结(根据需要进行更新)

如上述的文章所提到,舊有的 Observable 方法中的 map 或 filter 等方法已經完全消失了。而現在需要使用 RxJS 5.5 新增的 pipeable operators。

observable
  .pipe(
    filter(v => v < 100)
    map(v => `value = ${v}`),
  )
  .subscribe(v => console.log(v));

简而言之,filter、map等实际上是函数,它们被传递给Observable的管道方法进行处理。

Angular的配置文件已更改。

.angular-cli.json已经被移除,改为angular.json。
配置内容也有所不同。

请把scss设为默认吧~~

补充说明:这个问题在官方版本中已经修正了。我在使用6.0.3版本进行尝试时发现,在创建项目时将样式设置为scss,会在angular.json中进行以下配置,并且在生成组件时能正确地使用scss格式。

// ...
  "projects": {
    "project-name": {
      // ...
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      },

追加内容截止至此

如果使用以下代码生成项目,它将使用scss进行创建。然而,注意,

ng new my-app --style=scss

在此之后,无论我在下面添加哪个组件,它都不会转换为 SCSS。

ng generate component main

所以,当我想要将默认设置为 SCSS 时,我搜索了一下并发现要执行以下操作…

ng set defaults.styleExt scss

不过,这一点我们无法实现了。set 子命令已经消失了。
而且,即使想要直接在配置文件中指定,我也不知道该如何在 angular.json 中进行指定 (T.T)

鉴于情况不可避,每次都要指定扩展名并执行… 实在是麻烦。

ng generate component --style-ext=scss main 

我在Shell中设置了别名。由于我使用的是zsh,所以我在.zshrc文件中进行了以下设置。

alias ngc="ng generate component --styleext=scss"

您可以使用以下方式生成组件。

ngc main 
bannerAds