Angular 5中UpgradeComponent的name绑定与私有变量冲突的解决办法

嘿，这个冲突我之前在升级项目的时候也踩过坑！其实解决起来特别简单，核心思路就是给输入属性设置别名，避开UpgradeComponent内部的私有变量name。

问题根源 #

UpgradeComponent类内部确实有一个私有属性name，它是用来存储你要升级的AngularJS组件名称的。当你的Angular包装组件里也声明了@Input() name时，就会和这个私有变量撞名，导致你看到的报错。

一步到位的解决方法 #

只需要在Angular的包装组件中，给name输入属性加个别名，具体操作如下：

1. 修改包装组件的输入属性声明，用@Input('name')指定外部绑定的名称还是name，但内部改用一个不冲突的变量名（比如componentName）：

import { Component, Input, ElementRef, Injector } from '@angular/core';
import { UpgradeComponent } from '@angular/upgrade/static';

@Component({
  selector: 'my-angularjs-wrapper',
  template: `<my-angularjs-comp [name]="componentName"></my-angularjs-comp>`
})
export class MyAngularJSWrapper extends UpgradeComponent {
  // 用别名避开和UpgradeComponent私有name的冲突
  @Input('name') componentName: string;

  constructor(elementRef: ElementRef, injector: Injector) {
    // 这里的第一个参数是你的AngularJS组件的注册名称
    super('myAngularJSComp', elementRef, injector);
  }
}

2. 在使用这个包装组件时，依然可以正常用[name]传递值，完全不需要修改外部模板的写法：

<my-angularjs-wrapper [name]="userName"></my-angularjs-wrapper>

这种方案的优势很明显：

• 不用改动原有AngularJS组件的代码，改动范围最小
• 外部使用方式完全不变，不会影响其他依赖该组件的业务代码

如果你的项目场景允许，也可以考虑直接修改AngularJS组件的绑定名称（比如改成itemName），但这种方法需要修改更多关联代码，远不如别名方案简便。

内容的提问来源于stack exchange，提问作者NDavis