angular8引入新页面_Angular 6中引入的新功能

angular8引入新页面

As we all of us know that Google has just released its new version of Angular i.e. 6.0 in the mid of April 2018. It was the first major release from Google in the year 2018 which is mainly focused on the toolchain and also making angular easier for the user to create different types of applications. Except this major version also contains some new features and upgradation in respect to the previous versions.

众所周知，Google刚刚于2018年4月中旬发布了新版本的Angular（即6.0）。这是Google在2018年发布的第一个主要版本，主要侧重于工具链，也使Angle更易于使用用户创建不同类型的应用程序。 除此主要版本外，还包含一些相对于先前版本的新功能和升级。

At the final stage, this release confirms that the new Angular version is much lighter, faster and easier. Developers will obviously prefer it more as it makes their development easier. Also, Angular 6 supports the typescript version 2.7. So with the help of new typescript version, it is much easier to code with conditional type declarations, default declarations and strict class initialization.

在最后阶段，此版本确认新的Angular版本更轻，更快，更容易。 开发人员显然会更喜欢它，因为它使他们的开发更加容易。 另外，Angular 6支持打字稿版本2.7。 因此，借助新的Typescript版本，使用条件类型声明，默认声明和严格的类初始化进行编码要容易得多。

Now it’s time to discuss the major changes made in the Angular 6.

现在是时候讨论Angular 6中所做的主要更改了。

1.角度元素 (1. Angular Elements)

Angular is a perfect framework for developing Single Page Application. To create a widget or component that can be included in any existing web page was not a simple or easy task. But in Angular 6, it can be done with the help of Angular Elements. Actually, Angular 6 is the first release which completely supports Angular Elements. Angular Elements is the brainchild of Angular’s favorite Rob Wormald.

Angular是用于开发单页应用程序的理想框架。 创建可以包含在任何现有网页中的小部件或组件并不是一件容易的事。 但是在Angular 6中，可以借助Angular Elements来完成。 实际上，Angular 6是第一个完全支持Angular Elements的版本。 Angular Elements是Angular最喜欢的Rob Wormald的创意。

The Angular Elements package will give us the ability to create an angular component and then publish that component as a Web Component which can be used in any HTML page (maybe that page is not using Angular Framework) in other environments. It actually takes an angular component and then wraps it within a Custom element as a DOM element so that we can use our favorite angular component in other projects which do not have any support of Angular Framework.

Angular Elements包将使我们能够创建一个角度组件，然后将该组件发布为Web组件，该Web组件可在其他环境中的任何HTML页面（也许该页面未使用Angular Framework）中使用。 它实际上需要一个角度组件，然后将其包装在Custom元素中作为DOM元素，这样我们就可以在其他不支持Angular Framework的项目中使用我们喜欢的角度组件。

2. Service Worker Support

2.服务人员支持

Service worker is basically a script which runs in the web browser and manages to cache an application. This Service Worker is first introduced in Angular 5. In Angular 6, service worker comes with some bug fixing including some new functionalities. So when we deploy the latest version of the application, sometimes we may need to deactivate or uninstall the existing service worker.

服务工作者本质上是一个脚本，可在Web浏览器中运行并管理缓存应用程序。 此Service Worker最初是在Angular 5中引入的。在Angular 6中，Service Worker附带了一些错误修复程序，包括一些新功能。 因此，当我们部署应用程序的最新版本时，有时我们可能需要停用或卸载现有的服务工作者。

In Angular 5, there is no such straightforward option for doing this or to deactivate service worker. But Angular 6 brings this functionality with the new script file named safety-worker.js which is actually a part of the production bundle which helps us to unregister the existing the service worker.

在Angular 5中，没有这样简单的选项可以执行此操作或停用服务工作者。 但是Angular 6通过名为security-worker.js的新脚本文件带来了此功能，该脚本文件实际上是生产捆绑包的一部分，可以帮助我们注销现有的服务工作者。

Angular 6 now supports the configuration of navigation URLs within the Service Workers. The service worker will redirect navigation requests that don’t match any source or data group to the specified index file. Now, we can mention an optional navigational list in ngsw-config.json files which contains the desired URLs.

Angular 6现在支持在Service Workers中配置导航URL。 服务工作者会将与任何源或数据组都不匹配的导航请求重定向到指定的索引文件。 现在，我们可以在ngsw-config.json文件中提到一个可选的导航列表，其中包含所需的URL。

The only request whose URLs match any of the positive patterns and none of the navigate ones then it will be considered as the navigation requests and handled the right way by the Service Worker. In Angular 6, the service worker remains in the current mode unless the server is reconnected and update the work.

URL唯一与任何肯定模式匹配且与导航模式都不匹配的请求将被视为导航请求，并由Service Worker以正确的方式进行处理。 在Angular 6中，除非重新连接服务器并更新工作，否则服务工作者将保持当前模式。

3. Bye Bye Template Element

3.再见模板元素

The <template> element was depreciated since one year ago when Angular 4 is launched. Now it’s time to say goodbye the <template> because it is now removed from the Angular 6 framework. In Spite of using <template>, we need to use <ng-tempalate>

<template>元素自一年前Angular 4启动以来就已贬值。 现在是时候告别<template>了，因为它已经从Angular 6框架中删除了。 尽管使用<template>，我们仍需要使用<ng-tempalate>

4. i18n

4. i18n

One of the major changes in Angular 6 is in localization or i18n. In Angular 6, i18n is coming with runtime rendering so that there is no requirement of build application once per locale. The currency pipe was improved in Angular 6 in such a way that it makes a lot of sense like it will not round every currency value with 2 digits anymore.

Angular 6的主要变化之一是本地化或i18n。 在Angular 6中，i18n附带了运行时渲染，因此不需要每个区域设置一次构建应用程序。 在Angular 6中对货币管道进行了改进，使其在某种意义上就像不再将每个货币值都舍入到2位数字一样。

It will the round the currency to the appropriate digits (like it can be 3 digits roundup for Arabic Dinar or 0 round up for Chilean Pesos). If we want to retrieve this values programmatically, then we need to use the i18n function getNumberOfCurrencyDigits(). There are some other formatting functions which are also exposed publicly like formatDate, formatCurrency, formatPercent and formatNumber.

它将货币四舍五入为适当的数字（例如，阿拉伯语第纳尔可以为3位数字取整，智利比索为0位向上取整）。 如果要以编程方式检索此值，则需要使用i18n函数getNumberOfCurrencyDigits（）。 还有一些其他格式化功能也公开公开，例如formatDate，formatCurrency，formatPercent和formatNumber。

5.常春藤：新的渲染引擎 (5. Ivy: New Rendering Engine)

In Angular 6, the angular team introduced their third rendering engine called IVY. Ivy is the next generation angular rendering engine. In the previous version of Angular (i.e. Angular 2 to Angular 4), angular used View Engine for rendering purpose. Introduction of this rendering engine experienced the increase in speed and a decrease in the application size. The angular team expects the same type of experience with the new rendering engine.

在Angular 6中，Angular团队引入了他们的第三个渲染引擎IVY。 Ivy是下一代角度渲染引擎。 在以前的Angular版本（即Angular 2到Angular 4）中，angular使用View Engine进行渲染。 此渲染引擎的引入带来了速度的提高和应用程序大小的减小。 角度小组希望新的渲染引擎具有相同的体验。

Angular compiles our templates into equivalent TypeScript Code and then the typescript code is compiled along with the TypeScript to Javascript code and then the result is shipped to the users. So Ivy renderer is the new rendering engine which is basically designed to support backward compatibility with existing render and then also focused to improve the speed of rendering and it also optimized the size of the final package. In angular, it will not be the default renderer but we can manually enable it using compiler options. This important feature is not completely released in Angular 6 since it is in experimental mode and we can expect the complete version to come out in the next coming release.

Angular将我们的模板编译为等效的TypeScript代码，然后将Typescript代码与TypeScript一起编译为Javascript代码，然后将结果交付给用户。 因此，Ivy渲染器是新的渲染引擎，其主要目的是支持与现有渲染的向后兼容性，然后还致力于提高渲染速度，并且还优化了最终程序包的大小。 在angular中，它不是默认的渲染器，但是我们可以使用编译器选项手动启用它。 由于它处于实验模式，因此尚未在Angular 6中完全发布此重要功能，并且我们可以期望完整的版本会在下一个即将发布的版本中发布。

6. ngModelChange

6. ngModelChange

Before, Angular 6 ngModelChange event was emitted before the said form control updating. If we have an event handler for the ngModelChange event that checked the value through the control, the old value will be returned instead of the changed value. Now in Angular 6, ngModelChange has emitted the value after the value is updated in the form control.

之前，Angular 6 ngModelChange事件是在上述表单控件更新之前发出的。 如果我们有ngModelChange事件的事件处理程序，该事件处理程序通过控件检查了该值，则将返回旧值而不是更改后的值。 现在在Angular 6中，在表单控件中更新值之后，ngModelChange已发出该值。

7. ElementRef <T> (7. ElementRef<T>)

In previous versions of angular, when we wanted to create the reference of an element in the template, we could use @ViewChild or @ViewChildren or inject the host using ElementRef directly. But, the problem is that ElementRef had its nativeElement property typed as any. But now in Angular 6, we can use type ElementRef more strictly if we want.

在angular的早期版本中，当我们要在模板中创建元素的引用时，可以使用@ViewChild或@ViewChildren或直接使用ElementRef注入主机。 但是，问题在于ElementRef的nativeElement属性键入为any。 但是现在在Angular 6中，我们可以根据需要更严格地使用ElementRef类型。

@ViewChild('login' ) login:  ElementRef<HTMLInputElement>; ngAfterViewInit()  { this.loginInput .nativeElement.focus (); } 

8. Bazel编译器 (8. Bazel Compiler)

Bazel Compiler is actually a build system or mechanism which is used in nearly all software built at Google. This compiler only rebuilds what is necessary to build. Since our source code changes very often, so it does not make any sense to rebuild the entire application for every little change. In spite of rebuilding the entire application, we must build only that code part which actually changes and also that code that depends on that changes. So with the help of advanced local and distributed caching, optimized dependency analysis and parallel execution, we can achieve fast and incremental builds. From the Angular 6 release, we will start having this compiler support.

Bazel Compiler实际上是一个构建系统或机制，几乎在Google所构建的所有软件中都使用过。 该编译器仅重建需要构建的内容。 由于我们的源代码经常更改，因此对于每个小的更改都无法重建整个应用程序。 尽管重建了整个应用程序，但我们必须仅构建实际更改的代码部分以及依赖于此更改的代码。 因此，借助高级本地和分布式缓存，优化的依赖性分析和并行执行，我们可以实现快速和增量构建。 从Angular 6版本开始，我们将开始获得此编译器支持。

9. RxJS 6.0
Angular 6 now uses RxJs 6 internally. So we need to update our application accordingly. These changes provide developers an increase in performance and easier to debug ajax call stacks and improvement in modularity also making it as backward compatible as possible. But RxJs changed the way import things.

9. RxJS 6.0
Angular 6现在在内部使用RxJ 6。 因此，我们需要相应地更新我们的应用程序。 这些更改为开发人员提供了性能上的提高，并且更易于调试ajax调用堆栈，并提高了模块性，还使其尽可能地向后兼容。 但是RxJ改变了导入事物的方式。

In RxJS 5, you were probably writing:

在RxJS 5中，您可能正在编写：

import { Observable } from 'rxjs/Observable'; import 'rxjs/add/observable/of'; import 'rxjs/add/operator/map'; const squares$: Observable<number> = Observable.of(1, 2).map(n => n * n); 

RxJS 5.5 introduced the pipeable operators:

RxJS 5.5引入了可管道运算符：

import { Observable } from 'rxjs/Observable'; import { of } from 'rxjs/observable/of'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe( map(n => n * n)); 

And RxJS 6.0 changed the imports:

RxJS 6.0更改了导入：

import { Observable, of } from 'rxjs'; import { map } from 'rxjs/operators'; const squares$: Observable<number> = of(1, 2).pipe(map(n => n * n)); 

So as per the above code demonstration, we need to change the import of RxJs across our application for Angular 6. But I will say we don’t need to change this right now. Because RxJS released a library called rxjs-compat, which allows us to use RxJS version 6.0 with the old version syntaxes.

因此，按照上面的代码演示，我们需要在Angular 6的整个应用程序中更改RxJ的导入。但是我会说我们现在不需要更改此设置。 因为RxJS发布了一个名为rxjs-compat的库，该库使我们能够将RxJS 6.0版与旧版本语法一起使用。

10. Tree Shaking

10.摇树

Angular 6 moved from modules referencing services to services referencing modules to make the angular app smaller. Tree shaking is a build optimization step which tries to ensure any unused code does not get used into your final bundle. Instead of rendering template data and passing that directly into the interpreter which knows how to do everything. The new renderer is going to generate the template instructions directly. This results in much smaller bundles and a faster startup time.

Angular 6从模块引用服务移至服务引用模块，以使Angle App变得更小。 摇树是一个构建优化步骤，它试图确保任何未使用的代码都不会被使用到您的最终捆绑包中。 无需呈现模板数据并将其直接传递到知道如何执行所有操作的解释器中。 新的渲染器将直接生成模板指令。 这样可以使束更小，启动时间更快。

There is a new way defined Injectable Service in Angular 6. In this way, we can register a provider, directly inside the @Injectable() decorator, using the new providedIn attribute. It accepts ‘root’ as a value or any module name of our application. When we use ‘root’, it means this injectable will be registered as a singleton object in the application and we don’t need to add it to the providers of the root modules. In the same way, if we use provideIdIn : LoginModule, then injectable is registered as a provider of the LoginModules without adding it to the providers of the modules.

有在角6.定义注射服务这样一种新的方式，我们可以注册一个提供者，直接在@Injectable（）装饰内，使用新的providedIn属性。 它接受“ root”作为值或我们应用程序的任何模块名称。 当我们使用'root'时，这意味着该可注入对象将在应用程序中注册为单例对象，我们不需要将其添加到根模块的提供者中。 以同样的方式，如果我们使用provideIdIn：LoginModule，则会将injectable注册为LoginModule的提供者，而无需将其添加到模块的提供者中。

@Injectable({providedIn: 
    'root'   

@Injectable（{providedIn：  
'根'

})

}）

 export class UserService {}

  出口   类   用户服务   {}

So in the above section, we discuss the most important features of the Angular 6. In addition to these features, there are also several features like:

因此，在上一节中，我们讨论了Angular 6的最重要功能。除了这些功能之外，还有以下一些功能：

1. The router sometimes hits a race condition while a route is being instantiated and a new navigation request arrives. This issue has been solved in Angular 6
   在实例化路线并到达新的导航请求时，路由器有时会遇到竞争状况。 Angular 6中已解决此问题
2. Avoid overriding ngInjectableDef in the decorator if present on the type.
   如果类型上存在，请避免在装饰器中重写ngInjectableDef。
3. Angular Material Library uses Component Dev Kit (CDK) which provided 30+ UI components. CDK also allows us to build our own library of UI components using Angular Material.
   Angular Material Library使用组件开发套件（CDK），该组件提供了30多个UI组件。 CDK还允许我们使用Angular Material构建自己的UI组件库。
4. Angular CLI generates Angular artifacts using the technology called Schematics. If you decide to create your own template Angular team has added ng-add command in Angular-CLI which let's user to download and install new packages in your angular app.
   Angular CLI使用称为Schematics的技术生成Angular工件。 如果您决定创建自己的模板，Angular团队已在Angular-CLI中添加了ng-add命令，使用户可以在您的angular应用程序中下载并安装新软件包。
5. If the user wants to upgrade it's angular app from Angular 5 to Angular 6 so angular team added support for ng-update to its Angular-CLI which let the user update and upgrade packages.
   如果用户想将其Angular应用程序从Angular 5升级到Angular 6，则angular团队在其Angular-CLI中添加了对ng-update的支持，从而使用户可以更新和升级软件包。
6. The 2.6 version of Typescript’s “resolveModuleName” started to require paths passed to be separated by '/' instead of being able to handle '\'.
   Typescript的2.6版本的“ resolveModuleName”开始要求传递的路径以“ /”分隔，而不是能够处理“ \”。
7. Improved decorator error messages
   改进的装饰器错误消息
8. Enable size tracking of a minimal CLI render3 application
   启用最小的CLI render3应用程序的大小跟踪
9. The Angular team has decided to extend the long-term support (LTE) to all major releases starting with v4
   Angular团队已决定将长期支持（LTE）扩展到从v4开始的所有主要版本
10.  Web pack module bundler has been updated to version 4 es and have Angular CLI explore it, Schematics will help you with this
    Web pack模块捆绑器已更新至版本4 es，并已对其Angular CLI进行了探索，Schematics将帮助您解决此问题

Hope you found this information helpful.

希望对您有所帮助。

翻译自: https://www.experts-exchange.com/articles/32540/New-Features-Introduced-in-Angular-6.html

angular8引入新页面