绑定和@ViewChild问题

Question

这个问题可能是查看问题的最快方式

我不确定使用ViewChild时它是否只是一些明显的问题,但它很奇怪.

这个plunker显示3个输入:

• 第一个输入是基本输入和可以对焦的按钮.
• 第二个输入绑定到相同的值,单击编辑将解锁输入.
• 第三个输入也绑定到相同的值,单击编辑将解锁输入并为其提供焦点.

但是,在添加ViewChild以获取对输入的引用时,输入上的NgModel绑定将停止工作.但是您附加的任何其他绑定(如已禁用)仍将继续运行.如果您注释掉app/extended.component的第52行,它将再次绑定,但显然现在它无法集中注意力.

第一个输入/按钮显示,当您绑定到正在扩展的类中的属性时,这显然只是一个问题.

---

简而言之,当我通过ViewChild访问输入时,我对NgModel的绑定中断.

也就是说,给定一个属性为"someValue"的基数:绑定:

@Component({
  selector: 'binding-working',
  template: `<input type="text" [(ngModel)]="someValue" />`
})
export class Working extends Base<string> {  
  constructor() { }
};

不绑定:

@Component({
  selector: 'binding-broken',
  template: `<input type="text" #imBroken [(ngModel)]="someValue" />`
})
export class Broken extends Base<string> {  
  @ViewChild('imBroken') input;
  constructor() { }
};

Answer 1

更新2.3.0

好消息!

根据角博客http://angularjs.blogspot.ru/2016/12/angular-230-now-available.html

开发人员现在可以利用组件的对象继承.通过从父组件继承来共享或简化组件功能.

那么它应该没有自定义装饰器=> Plunker示例

您可以在此提交中看到更多详细信息https://github.com/angular/angular/commit/f5c8e0989d85bc064f689fc3595207dfb29413f4

旧版

那是设计的.

Angular2不支持完全继承(https://github.com/angular/angular/issues/7968#issuecomment-219865739).

您的子ViewChild装饰器覆盖propMetadata在基Extended类中定义的.因此,您的ExtendedInputBroken类没有像baseLevel和那样的父属性baseLevelChange

Thierry Templier在Angular2中撰写了一篇关于类继承的精彩文章

• https://medium.com/@ttemplier/angular2-decorators-and-class-inheritance-905921dbd1b7#.8r5fuys6l

如果您真的想这样做,我可以为您提供以下解决方案.

只需像这样创建自定义装饰器:

function InheritPropMetadata() {
  return (target: Function) => {
    const targetProps = Reflect.getMetadata('propMetadata', target);

    const parentTarget = Object.getPrototypeOf(target.prototype).constructor;
    const parentProps = Reflect.getMetadata('propMetadata', parentTarget);

    const mergedProps = Object.assign(targetProps, parentProps);

    Reflect.defineMetadata('propMetadata', mergedProps, target);
  };
};

然后将其应用于您的ExtendedInputBroken课程:

@InheritPropMetadata()
export class ExtendedInputBroken extends Extended<string> implements OnInit {
  ...

Plunker演示

此链接可能会让您感兴趣:

• 使用基类装饰器扩展组件装饰器