Question

我有一个包含一些状态信息的Angular组件。此组件是另一个组件的子组件，用作继承组件类的基类。此基类具有包含“state”组件的@ViewChild成员。基类有一个方法getState()，用于从ViewChild获取内部状态。这在处理实际的基类组件时工作正常，但是当它是一个继承的类组件时，@ViewChild成员是未定义的。我已经阅读了TypeScript和其他OOP语言中的继承之间的一些不寻常的区别，但它似乎没有回答这个问题。我还看到一些问题报告说装饰器属性（例如@Input，@Output，@ViewChild）在Angular中没有正确继承，作为一种解决方法，您只需声明他们再次在继承的类中，但我尝试了这个并没有解决这个问题。

我已将我的代码删除到显示问题的最简单的情况：

StateComponent ：

@Component({
  selector : 'app-state',
  template: `
  <p>Here's the state: {{state}}</p>
  `
})
export class StateComponent {
  state: string = "My state.";
}

BaseComponent ：

@Component({
  selector : 'app-base',
  template: `
    <div>
      <p>BaseComponent</p>
      <app-state></app-state>
    </div>
    `
})
export class BaseComponent {
  @ViewChild(StateComponent) stateCmp: StateComponent;

  getState(): string {
    return this.stateCmp.state;
  }
}

InheritedComponent ：

@Component({
  selector : 'app-inherited',
  template: `
    <app-base></app-base>
    <div>
      <p>InheritedComponent</p>
    </div>
  `
})

export class InheritedComponent extends BaseComponent {
  constructor() {
    super();
  }
}

AppComponent ：

@Component({
  selector: 'app-root',
  template: `
  <app-inherited></app-inherited>
  <button (click)="onClick()">Get state</button>
  <p>{{ theState }}</p>
  `
})
export class AppComponent {
  @ViewChild(InheritedComponent) cmpRef: InheritedComponent;

  theState: string;

  onClick() {
    this.theState = this.cmpRef.getState();
  }
}

在此示例中，单击Get state失败，因为BaseComponent.stateCmp未定义。更改AppComponent以使用BaseComponent可以正常工作并从子组件获取状态。有没有办法做我想在这里做的事情？

这是一个plunkr，显示AppComponent包含InheritedComponent的失败案例。

这是一个显示工作案例的plunkr，唯一的区别是AppComponent包含BaseComponent。

Answer 1

好的，经过多思考之后，我相信我已回答了自己的问题。

<app-base>中的InheritedComponent是BaseComponent的不同实例。

InheritedComponent是一个BaseComponent，但由于它没有直接StateComponent个孩子，因此cmpState未定义。

我真正需要的是在继承组件的模板中包含基本组件模板的方法，以便它本身是实际的基本组件，而不是不同的实例。看起来这是Angular中提出的功能请求： https://github.com/angular/angular/issues/13766

Angular子类成员未定义

1 个答案: