相关疑难解决方法(0)

我在Typescript中构建一个Angular2应用程序,并希望使用Typescript提供的类系统功能(读取:类继承).但是,似乎Angular2在派生类中表现不佳.我正在寻找一些帮助我的应用程序工作.

我面临的问题是我有一个基类,并从那里派生了一些子类.当我构建我的组件树时,我希望能够访问组件的父/子(两种方式都可以).据我所知,Angular2提供了两种方法来实现这一目标:

1. 将父级注入子组件
2. 使用ContentChildren(或ViewChildren)访问组件的子项.

这两个工作,如果你知道你与(ChildComponent)工作类的类型,但忽视了,当您尝试使用的基类,这些部件(BaseComponent)作为选择的.

要在某些代码中将其可视化(请参阅此Plunker以获得实时演示),我有一个应用程序组件/类,如下所示:

@Component({
  selector: 'my-app',
  template: `<parent-comp>
      <child-comp1></child-comp1>
      <child-comp1></child-comp1>
      <child-comp2></child-comp2>
    </parent-comp>`,
  directives: [ParentComponent, ChildComponent1, ChildComponent2]
})
export class MyApplication  {
}

基类和子类定义为:

export class BaseComponent {
  // Interesting stuff here
}

@Component({
  selector: 'child-comp2',
  template: '<div>child component #2</div>'
})
export class ChildComponent2 extends BaseComponent {
}

@Component({
  selector: 'child-comp1',
  template: '<div>child component #1</div>'
})
export class ChildComponent1 extends BaseComponent {
}

而且Parent类有一些逻辑来计算它的子节点.

@Component({
  selector: 'parent-comp',
  template: `<div>Hello World</div>
   <p>Number of Child Component …

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

我不确定使用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() { }
};