角子类成员未定义

Question

I have an Angular component that contains some state information. This component is a child component of another component that is used as a base class for inherited component classes. This base class has a @ViewChild member containing the "state" component. The base class has a method getState() that is used to fetch the inner state from the ViewChild. This works fine when dealing with an actual base class component, but when it is an inherited class component, the @ViewChild member is undefined. I've read up on some of the unusual differences between inheritance in TypeScript and other OOP languages, but it didn't seem to answer this question. I've also seen some issues reported that say that decorator properties (such as @Input , @Output , @ViewChild ) aren't inherited properly in Angular, and as a workaround you can just declare them again in the inherited class, but I tried this and it didn't resolve this issue.

I've stripped down my code to the simplest case that shows the problem:

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();
  }
}

In this sample, clicking Get state fails because BaseComponent.stateCmp is undefined. Changing the AppComponent to use BaseComponent works fine and gets the state from the child component. Is there a way to do what I'm trying to do here?

Here is a plunkr showing the failing case where AppComponent contains InheritedComponent.

Here is a plunkr showing the working case where the only difference is AppComponent contains BaseComponent.

Answer 1

Okay, after thinking this through some more, I believe I've answered my own question.

The <app-base> in InheritedComponent is a different instance of BaseComponent .

The InheritedComponent is-a BaseComponent , but since it doesn't have a StateComponent child directly, then it's cmpState is undefined.

What I really needed here was a way to include the base component template in the inherited component's template, so that it was the actual base component itself, not a different instance. It looks like this is a proposed feature request in Angular: https://github.com/angular/angular/issues/13766