Question

This plnker可能是查看问题的最快捷方式

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

吸管显示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

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

那么它应该没有自定义装饰器=＆gt; 的 Plunker Example

您可以在此提交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 demo

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

Extending component decorator with base class decorator

绑定和@ViewChild问题

1 个答案: