Не удается связать ввод при использовании абстрактных классов (уровень иерархии 2+) - PullRequest
Новая
       6

Не удается связать ввод при использовании абстрактных классов (уровень иерархии 2+)

0 голосов
/ 04 марта 2020

В моем приложении 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 - TwoComponent расширяется AbstractBComponent расширяется 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.

1 Ответ

0 голосов
/ 04 марта 2020

Первоначально я думал, что это ошибка, и сообщил об этом здесь , где я на самом деле указал на решение elvisbegovi c

решение состоит в том, чтобы добавить @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 {}
...