升级angualr8项目需要做的更改

[deepthan]

升级angualr8项目需要做的更改

因把大部分依赖包做了升级，所以需删除原有的node_modules重新使用yarn下载

Angular 8更新功能纪要](https://code.aliyun.com/ithinkdt-s13n/front/wikis/angular-v8-update-main-contents)

angular

1. @viewChild和@ContentChild用法改变了

官方文档

之前

@ViewChild('tableOpr') tableOpr;

现在

@ViewChild('tableOpr', { static: false }) tableOpr;

2. 路由懒加载写法改变了

官方文档

之前

{path: '/admin', loadChildren: './admin/admin.module#AdminModule'}

现在

{path: `/admin`, loadChildren: () => import(`./admin/admin.module`).then(m => m.AdminModule)}

3. HttpModule和Http服务不再支持

HttpModule --> HttpClientModule
Http --> HttpClient

如果使用旧版HttpModule和Http服务，更改为HttpClientModule和HttpClient服务。

4. 如果项目有用到或者依赖中有用到rxjs6，请删除rxjs-compat。

5. 选择使用::ng-deep弃用/deep/

6.选择Node 10.9或更高版本(最好下载10.16.0)

7. typescript版本需要3.4.x及以上，如3.4.1

ng-zorro-antd

1. form表单写法做了增强，写法如下：

<nz-form-control nzErrorTip="Please input your username!">
  <nz-input-group [nzPrefix]="prefixUser">
    <input formControlName="userName" nz-input placeholder="Username" />
  </nz-input-group>
</nz-form-control>

2. Dropdown 不再需要 Component 包裹 Directive 的写法，避免 Component 的 selector 对于 样式的影响。

之前

<nz-dropdown nzPlacement="bottomRight">
  <div nz-dropdown>
    下拉菜单的名称
  </div>
  <ul nz-menu nzSelectable>
    <li nz-menu-item >
        下拉内容
    </li>
  </ul>
</nz-dropdown>

现在

<div nz-dropdown [nzDropdownMenu]="langMenu" nzPlacement="bottomRight">
    下拉菜单的名称
</div>
<nz-dropdown-menu #langMenu="nzDropdownMenu">
  <ul nz-menu nzSelectable >
    <li nz-menu-item >
      下拉内容
    </li>
  </ul>
</nz-dropdown-menu>

3. nzDropdownService名字换成了NzContextMenuService

之前

import { nzDropdownService } from 'ng-zorro-antd';

现在

import { NzContextMenuService } from 'ng-zorro-antd';

4. contextMenu参数类型发生了改变

之前

  contextMenu($event: MouseEvent, template: TemplateRef<void>): void {
    this.dropdown = this.nzDropdownService.create($event, template);
  }

现在

  contextMenu($event: MouseEvent, menu: NzDropdownMenuComponent): void {
    this.dropdown = this.nzDropdownService.create($event, menu);
  }

5. 动态创建的menu关闭方法变更

之前

this.dropdown = this.nzDropdownService.create($event, template);

this.dropdown.close();

现在

this.nzContextMenuSrv.create($event, menu);

this.nzContextMenuSrv.close();