的帖子 yobet软件 雇用我 的简历
Brian F爱 雇用我
Brian F爱
向一位来自波特兰的专注于Ayobet英雄联盟ngular、Web技术和Node.js的谷歌开发专家学习。
广告 ·ultimatecourses.com
用终极课程正确地学习Angular“></a> </div> <article class=

Angular 9更新指南

学习成功更新到角度9。

先决条件

在使用新的常春藤渲染器开始对角版本9更新之前，您需要完成一些先决条件：

  1. NGForm.选择器。
  2. @contentchild.和@ContentChildren主持人。
  3. 不要给只属于模板的变量赋值。
  4. TypeScript编译器更新(可选)。
  5. 渲染器弃用。

让我们打破每个人。

NGForm.选择器

首先，更新全部NGForm.您使用的应用程序中的选择器< ng-form >自定义元素。如果您使用的是标准，这不会影响您<形式>元素或反应形式。

之前:

<ngForm# personForm=“ngForm“><垫片场><席标签>搜索席标签><输入MATINPUT.((ngModel))=“问：“名称=“问：“/>垫片场>ngForm>

符合要求，您需要更新< ngForm >至< ng-form >：

<NG形式# personForm=“ngForm“><垫片场><席标签>搜索席标签><输入MATINPUT.((ngModel))=“问：“名称=“问：“/>垫片场>NG形式>

@contentchild.和@ContentChildren主机

该@contentchild.和@ContentChildrenDecorator查询将不再能够匹配其指令自己的主机节点。

之前:

@指示（{选择器：“[swrActions]”}）出口类actionsdirective实施AfterContentInit{// [TODO]: Angular v9的ContentChild不会返回宿主元素!!@ContentChild（actionsdirective那{静态的：真正的那读：ElementRef}）selfElementRef：ElementRef;构造函数（私人的只读渲染器：Render2.）{}ngaftercontentinit.（）{constel=这个。selfElementRef。nativeElement如HTMLElement;如果（！！el）{返回;}这个。渲染器。setStyle（el那“显示”那“弯曲”）;这个。渲染器。setStyle（el那“flexDirection”那'行'）;这个。渲染器。setStyle（el那“justifyContent”那'flex-end'）;}}

上面，我们使用@contentchild.内容查询访问主机ElementRef的指令。FWIW，这不是一个最佳实践，这就是为什么它被弃用的原因。

理想情况下，我们正在访问ElementRef通过一个注入到指令中的依赖:

@指示（{选择器：“[swrActions]”}）出口类actionsdirective实施AfterContentInit{构造函数（私人的只读elementRef：ElementRef那私人的只读渲染器：Render2.）{}ngaftercontentinit.（）{constel=这个。elementRef。nativeElement如HTMLElement;如果（！！el）{返回;}这个。渲染器。setStyle（el那“显示”那“弯曲”）;这个。渲染器。setStyle（el那“flexDirection”那'行'）;这个。渲染器。setStyle（el那“justifyContent”那'flex-end'）;}}

这里的目标是避免使用@contentchild（）和@contentchildren（）查询是否访问宿主元素。迁移是依靠注入宿主的ElementRef。

不要给模板专属的变量赋值

必须避免突变并将未知属性为对象分配此迁移。

其中一个大具有新常春藤渲染器的角度版本9的更新是模板类型检查，这与此新功能直接相关。在Angular版本9和Ivy渲染器之前，模板 - 仅限于基本上的变量任何类型。这意味着，您可以根据自己的需要改变对象及其属性。通常，这是一个反模式。

使用Angular Version 9和Ivy渲染器前进，仅基于TypeScript编译器选项强烈键入模板变量，以进行严格的模板类型检查。因此，我们必须这样做不突变模板 - 仅变量。

让我们来看一个例子不突变模板 - 仅变量：

<按钮#translatebtn.（点击）=“translateBtn。翻译=！！translateBtn。翻译“>翻译按钮><垫手风琴><垫 - 扩展面板* ngFor=“让人们“><垫 - 扩展面板标题><垫片 - 标题>{{person.fields.name |wookiee：translatebtn.translate}}垫片 - 标题>垫 - 扩展面板标题>垫 - 扩展面板>垫手风琴>

该翻译Angular version 8中的模板专属变量是类型型的任何。在Angular第9版中，这个变量是强类型的htmlbuttotelement.。和,htmlbuttotelement.接口才不是有一个翻译属性。

我们的目标是删除模板的突变仅变量，并依赖于组件属性和方法：

<按钮（点击）=“onttranslate（）“>翻译按钮><垫手风琴><垫 - 扩展面板* ngFor=“让人们“><垫 - 扩展面板标题><垫片 - 标题>{{person.fields.name | wookiee: translateToWookiee}}垫片 - 标题>垫 - 扩展面板标题>垫 - 扩展面板>垫手风琴>

我们已经删除了仅用于模板的变量。注意模板变量的符号#translatebtn.被移除。

现在，我们只需在组件的类中实现属性和方法:

出口类PeopleListComponent{/ **如果内容应该被翻译成Chewbaka * /翻译=假;ontranslate.（）：无效{这个。翻译=！！这个。翻译;}}

TypeScript编译器更新(可选)

在更新Angular版本9之前，您可以选择选择将更新更新的编译器更新。更新您的tsconfig.json.文件如下:

{“compileroptions”：{//为简洁起见省略“noImplicitAny”：真正的那“noimplicitreturns”：真正的那“noimplicitthis”：真正的那“noFallthroughCasesInSwitch”：真正的那“strictnullchecks”：真正的//为简洁起见省略}}

要包含的关键编译器标志是：

  • noimplicicany.防止编译器暗示参数、变量或赋值的类型为类型任何，当编译器不能推断类型或代码没有显式声明类型时，这是默认值。
  • noimplicitreturns.防止您通过函数掉落到未被注意的函数，意思是，而无需您的知识可以返回任何隐含地。这确保您正正确返回正确类型，无论您在哪里返回值的代码的分支。
  • noimplicitthis.确保我们不会承担的价值这个。作为JavaScript开发人员，我们知道这个值取决于函数的执行上下文。此编译器标志通过假设保护我们或允许编译器暗示这个。
  • noFallthroughCasesInSwitch确保每一个情况下声明是适当的打破防止案件败诉的声明情况下声明。
  • strictNullChecks确保我们不允许两者兼得未定义的和零除非在我们的打字标记中明确声明，否则从全局可用或可分配的值。这旗是高度推荐使用，因为它可以防止可能导致的错误nullish结合和其他真正/咆哮的胁迫。

渲染器弃用

这种变化已久期待着，所以这应该是毫不奇怪的。已弃用渲染器最终被从Angular的代码库中移除。这意味着，如果你的Angular项目通过依赖注入依赖于已弃用的渲染器类，你需要迁移到Render2.。

幸运的是，这种迁移被ng更新我们即将执行的命令。所以，如果你很懒(像我一样)，那么你可以暂时跳过这个，让Angular的更新替你迁移这个。

大多数方法都很容易更新渲染器至Render2.，但那些没有的将会为你而定。

务必在更新任何内容后查看Git Diff渲染器至Render2.迁移。

更新到最新的Angular 8补丁

在更新Angular版本9之前，您必须先更新到最新稳定的Angular版本8：

ng更新@angular/core@8 @angular/cli@8

更新到Angular版本9

我们成功了!我们已经准备好通过以下方式将我们的Angular项目更新到Angular version 9了ng更新：

ng update @angular/cli @angular/core

虽然发布不是最终的，并且目前处于发布候选阶段，但是您需要添加——下一个国旗:

NG更新@ Angular / CLI @ Angular / Core --next

本地化(i18n)

如果您正在使用角度的本地化（i18n）框架，那么您还需要使用ng补充道命令安装新的@ Angular /本地化包：

ng加@ Angular /本地化

当你检查angular.json更新后文件，您还会注意到一个新的I18N.配置部分：

{“美元模式”：“./node_modules/@angular/cli/lib/config/schema.json”那“版”：1那“newProjectRoot”：“项目”那“项目”：{“Angular-V9”：{“i18n”：{“locales”：{“de”：{“翻译”：“src / locale / messages.de.xlf”那“basehref”：“}}}}}}

你的angular.json您应该考虑的配置。

首先，指定sourceLocal属性。此默认值是en - us，所以你需要根据源代码的区域设置来为你的应用程序指定源区域设置:

{“美元模式”：“./node_modules/@angular/cli/lib/config/schema.json”那“版”：1那“newProjectRoot”：“项目”那“项目”：{“Angular-V9”：{“i18n”：{“sourcelocale”：“en - us”那“locales”：{“de”：{“翻译”：“src / locale / messages.de.xlf”那“basehref”：“}}}}}}

第二，考虑更新Basehref.根据需要配置每种语言环境。在大多数情况下，我们将使用惟一的子域或惟一的路径为应用程序的每个地区提供服务。

在我的用例中，我希望每个地区都在唯一的路径上服务:

  • 我们英语:/ en - US /
  • 德意曲：/ de /

因此，我修改了Basehref.为德地区:

{“美元模式”：“./node_modules/@angular/cli/lib/config/schema.json”那“版”：1那“newProjectRoot”：“项目”那“项目”：{“Angular-V9”：{“i18n”：{“sourcelocale”：“en - us”那“locales”：{“de”：{“翻译”：“src / locale / messages.de.xlf”那“basehref”：“/ /”}}}}}}

接下来，我的Angular版本8项目使用Mulitple构建每个语言环境的配置。根据我的经验到目前为止，您可以在不再需要时删除它们：

{“美元模式”：“./node_modules/@angular/cli/lib/config/schema.json”那“版”：1那“newProjectRoot”：“项目”那“项目”：{“Angular-V9”：{......“建筑师”：{“建立”：{......“配置”：{“de”：{......}那“生产 -  de”：{......}}}}}}}

我删除了这两种德和production-de配置。

最后，更新项目中的生产构建命令package.json.文件来包含新的——本地化旗帜构建所有本地化：

{“名称”：“Angular-V9”那“版”：“0.0.0”那“脚本”：{“ng”：“ng”那......“服务：dist”：http-server -p 8080 -c-1 dist/angular-v9那“建立”：ng build -prod -本地化那}那

注意：

  • 首先，我有一个新的服务:经销命令，其中我使用http-server节点模块为我的产品构建的本地化版本提供服务。
  • 其次，我更新了构建命令包含新的——本地化旗帜构建所有本地化。

我还要提一下，您可以创建额外的配置来构建特定的区域设置或一组区域设置。

邮政更新清单

在我们成功更新到角度9之后，我们需要做的两个小事：

  1. 从已弃用的迁移TestBed.get ()新的方法TestBed.inject T < > ()方法。
  2. 删除不必要的入学股关系在我们的属性@NgModule ()装饰器对象。

迁移到TestBed.inject ()

发布Angular version 9的更新后，我们的第一个任务就是从TestBed.get ()至TestBed.inject T < > ()。

之前:

描述（“FilmService”那（）= >{让服务：FilmService;摘要（（）= >测试用。configureTestingModule（{进口：[httpclienttestingmodule.]}））;它（“创建”那（）= >{服务=测试用。得到（FilmService）;预计（服务）。Tobeththy.（）;}）;}）;

后:

描述（“FilmService”那（）= >{让服务：FilmService;摘要（（）= >测试用。configureTestingModule（{进口：[httpclienttestingmodule.]}））;它（“创建”那（）= >{服务=测试用。注入<FilmService>（FilmService）;预计（服务）。Tobeththy.（）;}）;}）;

注意：

  • 我们改变TestBed.get ()至TestBed.inject T < > ()
  • 我们指定了从中返回的类型的通用注入（）方法。

去掉入学股关系

有了Angular 9版和新的Ivy渲染器，我们不再需要显式地告诉编译器哪些组件不在组件依赖图中。组件中需要声明的一个很好的例子入学股关系数组是对话框。

这个更新很简单，谁不喜欢删除代码呢?只是删除入学股关系来自所有的数组@NgModule ()您申请中的装饰器。

之前:

@NgModule（{声明：[//为简洁起见省略personfilmsdialogcomponent.那PersonHomePlanetDialogComponent]那入学股关系：[personfilmsdialogcomponent.那PersonHomePlanetDialogComponent]}）出口类peoplemodule{}

在我们移除不必要的东西之后入学股关系数组：

@NgModule（{声明：[//为简洁起见省略personfilmsdialogcomponent.那PersonHomePlanetDialogComponent]}）出口类peoplemodule{}

成功!

我们已经成功地更新到了Angular的第9版和新的Ivy渲染引擎。

有问题吗？需要帮忙？让我知道！

Brian F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了，我住在波特兰，我经常滑雪。