使用抽象类时无法绑定输入（2+层次结构）

Question

在我的 Angular 应用程序中：

• 当组件使用在其直接父（抽象）类中定义的输入时，一切正常。

• 当组件使用在 2 级以上父（抽象）类中定义的输入时， 或 会ng build给出ng serve错误。

例如，我有4个课程：

export abstract class AbstractAComponent {
  @Input() myInput: string;
}

export abstract class AbstractBComponent extends AbstractAComponent {}

@Component({
  selector: 'app-one',
  templateUrl: './one.component.html',
  styleUrls: ['./one.component.scss']
})
export class OneComponent extends AbstractAComponent {}

@Component({
  selector: 'app-two',
  templateUrl: './two.component.html',
  styleUrls: ['./two.component.scss']
})
export class TwoComponent extends AbstractBComponent {}

这就是我使用它们的方式：

<app-one [myInput]="'value 1'"></app-one>
<app-two [myInput]="'value 2'"></app-two>

简而言之： -@Input() myInput定义在AbstractAComponent -OneComponent直接扩展AbstractAComponent - TwoComponentextendsAbstractBComponent扩展 AbstractAComponent

预期行为： - 和OneComponent都TwoComponent应该有@Input() myInput

当前行为： - 看起来TwoComponent没有正确继承 @Input() myInput

我收到以下错误：

ERROR in src/app/app.component.html:2:10 - error NG8002: Can't bind to 'myInput' since it isn't a known property of 'app-two'.
1. If 'app-two' is an Angular component and it has 'myInput' input, then verify that it is part of this module.
2. If 'app-two' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Answer 1

我最初认为这是一个错误，并在这里报告了它，实际上elvisbegovic向我指出了解决方案

解决方案是添加@Directive()到您的抽象类，例如我的：

import { Directive, Input } from '@angular/core';

@Directive()
export abstract class AbstractAComponent {
  @Input() myInput: string;
}

import { Directive } from '@angular/core';

@Directive()
export abstract class AbstractBComponent extends AbstractAComponent {}