绑定和@ViewChild问题

Question

这个折叠式可能是最快看到这个问题的方法

我不确定在使用ViewChild时是否有一些明显的问题，但这很奇怪。

柱塞显示了3个输入：

• 第一个输入是一个基本输入和一个可以聚焦它的按钮。
• 第二个输入绑定到相同的值，单击“编辑”将解锁输入。
• 第三个输入也绑定到相同的值，单击“编辑”将解锁输入并使其具有焦点。

但是，当添加ViewChild以获得对输入的引用时，输入上的NgModel绑定将停止工作。但是，您附加的任何其他绑定(如禁用的)仍将继续工作。如果您注释掉app/扩展名. comment的第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

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

因此，它应该在没有自定义装饰器=> 柱塞实例的情况下工作。

在这个提交https://github.com/angular/angular/commit/f5c8e0989d85bc064f689fc3595207dfb29413f4中可以看到更多的细节

旧版

这是按照设计的。

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

您的子ViewChild装饰器重写在基类Extended类中定义的propMetadata。因此，您的ExtendedInputBroken类没有像baseLevel和baseLevelChange这样的父属性

Thierry 写了一篇关于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 {
  ...

柱塞演示

这个链接可能会让你感兴趣：

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