У меня есть угловой компонент, который содержит некоторую информацию о состоянии.Этот компонент является дочерним компонентом другого компонента, который используется в качестве базового класса для унаследованных классов компонентов.Этот базовый класс имеет член @ViewChild, содержащий компонент «состояние».Базовый класс имеет метод getState(), который используется для извлечения внутреннего состояния из ViewChild.Это прекрасно работает при работе с реальным компонентом базового класса, но когда он является унаследованным компонентом класса, член @ViewChild не определен.Я читал о некоторых необычных различиях между наследованием в TypeScript и других языках ООП, но, похоже, он не ответил на этот вопрос.Я также видел сообщения о некоторых проблемах, которые говорят, что свойства декоратора (такие как @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.