Angular 6及其新功能-三分钟内完成解释

Angular has come out with some amazing new features in version 6.0.0, especially in Angular-cli. Now, with Angular 6, you can easily update your old packages, create native web elements using Angular Elements, and many other things. Let’s take a look!

Angular在6.0.0版中推出了一些惊人的新功能，尤其是在Angular-cli中。 现在，借助Angular 6，您可以轻松地更新旧软件包，使用Angular Elements创建本机Web元素以及许多其他功能。 让我们来看看！

ng添加 (ng add)

ng add is a new command in Angular-cli that helps you install and download new packages in your angular apps. It works the same as npm, but it doesn’t replace it.

ng add是Angular-cli中的新命令，可帮助您在angular应用程序中安装和下载新软件包。 它的工作原理与npm相同，但不能替代它。

ng更新 (ng update)

ng update is a new Angular-cli command too. It’s used to update and upgrade your packages. It’s really helpful, for example, when you want to upgrade from Angular 5 to Angular 6, or any other package in your Angular app.

ng update也是新的Angular-cli命令。 它用于更新和升级您的软件包。 例如，当您想从Angular 5升级到Angular 6或Angular应用程序中的任何其他软件包时，它确实很有用。

在服务本身内部声明提供者 (Declaring the providers inside the service itself)

Before this update, you had to the declare the providers array in app.module.ts

在此更新之前，您必须在app.module.ts声明providers数组

Now with Angular 6, you can provide your service inside the supervisor itself by putting the providedIn:root property within the "@injectable" decorator.

现在有了Angular 6，您可以通过将@injectable" providedIn:root属性放在“ @injectable" 装饰器中来在管理器内部提供服务。

使用ng-template代替template指令 (Use ng-template instead of template directive)

You can use ng-template to render the HTML instead of the template tag in the new version of Angular. ng-template is an Angular element, and it works when it is used with a structural directive such as *ngFor and *ngIf

您可以使用ng-template来呈现HTML而不是新版本的Angular中的template标签。 ng-template是一个Angular元素，当与结构指令(例如*ngFor和*ngIf一起使用时，它可以工作

角度元素 (Angular elements)

Angular 6 introduced us to Angular elements. You’re able to render your Angular elements as native web elements, and they’re interpreted as trusted HTML elements.

Angular 6向我们介绍了Angular元素。 您可以将Angular元素呈现为本地Web元素，并将它们解释为受信任HTML元素。

You can add Angular elements by running the command below:

您可以通过运行以下命令来添加Angular元素：

Import createCustomElement in your component.

在您的组件中导入createCustomElement 。

Then create your customized element!

然后创建您的自定义元素！

MyElemComponent.ts

MyElemComponent.ts

The result:

结果：

Note: you have to implement the DomSanitizer method from @angular/platform-browser to make your custom element a trusted HTML tag .

注意：您必须从@angular/platform-browser实现DomSanitizer方法，以使自定义元素成为受信任HTML标签。

You can learn more about Angular elements here

您可以在此处了解有关Angular元素的更多信息

升级到RxJS 6.0.0 (Upgrading to RxJS 6.0.0)

Angular 6 uses the latest version of Rxjs library. Now you can enjoy the newest features of RxJS 6 in your Angular app :)

Angular 6使用最新版本的Rxjs库。 现在，您可以在Angular应用程序中享受RxJS 6的最新功能：)

结语 (Wrapping Up)

Angular itself doesn’t have many groundbreaking changes in the Angular core, but Angular-cli is really exciting. The Angular team is focusing more on performance, building PWAs easily, providing a good environment to work in which to work with Angular in an easy way.

Angular本身在Angular核心中没有很多突破性的变化，但是Angular-cli确实令人兴奋。 Angular团队将更多的精力放在性能上，轻松地构建PWA，提供了一个良好的工作环境，以便在其中轻松地与Angular合作。

You can find me on Twitter.

您可以在Twitter上找到我。

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — said@devsdata.com.

顺便说一句，我最近与一群强大的软件工程师一起为我的一个移动应用程序工作。 该组织很棒，产品交付速度非常快，比我所合作的其他公司和自由职业者要快得多，我想我可以诚实地推荐他们用于其他项目。 如果您想与我联系，请给我发送电子邮件-said@devsdata.com 。

翻译自: https://www.freecodecamp.org/news/angular-what-is-the-new-briefly-e6837348dd3a/