无法绑定到“属性X"，因为它不是“子组件"的已知属性 [英] Can't bind to 'Property X' since it isn't a known property of 'Child Component'

问题描述

在我的项目中，我有一个泛型类和从中继承的其他一些组件.

In my project I have a generic class and some other components which inherited from that.

BaseRdnInput.ts:

   @Injectable()
    export abstract class BaseRdnInput implements ControlValueAccessor, Validator {
    
      @Input() rdnModel?: any | Array<any>;
      @Output() rdnModelChange: EventEmitter<any | Array<any>> = new EventEmitter<any | Array<any>>();
      // many code after...
    }

RdnInputComponent.ts:

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'rdn-input',
  templateUrl: './rdn-input.component.html'
})
export class RdnInputComponent extends BaseRdnInput implements OnInit, AfterViewInit {
 // many code after...
constructor(public changeDetectorRef: ChangeDetectorRef) {
    super(changeDetectorRef);
  };
// many code after
}

然后我正在 ContractComponent.html中使用此组件:

<rdn-input [(rdnModel)]='headerEntity.saleNo'></rdn-input>

通过这一行代码，我得到此错误:

By this line of code I get this error :

无法绑定到"rdnModel"，因为它不是的已知属性"rdn-input".

Can't bind to 'rdnModel' since it isn't a known property of 'rdn-input'.

1. 如果"rdn-input"是Angular组件，并且具有"rdnModel"输入，则请验证它是否属于此模块.
2. 如果"rdn-input"是Web组件，则将"CUSTOM_ELEMENTS_SCHEMA"添加到该组件的"@ NgModule.schemas"以禁止显示此消息.
3. 要允许任何属性，请在此组件的"@ NgModule.schemas"中添加"NO_ERRORS_SCHEMA".

在升级之前，它工作正常.我的问题与此非常相似:Angular2 RC5:.我得到一些避免这种错误的方法，最重要的是:检查是否在子类的属性中添加@input或在父类的bidding属性中添加attr.如果看到我已经在 BaseRdnInput.ts:中添加了 @input .而且我不想使用attr，因为它将阻止该属性向下传递给嵌套指令.反正有通过吗?

It was working fine before I upgrading. My question is very similar to this one: Angular2 RC5: Can't bind to 'Property X' since it isn't a known property of 'Child Component'. I got that there are some setps to avoid this error and the most important is: checking if we add @input to the property of sub class or adding attr to the biding property of parent. if you see I have already added @input in BaseRdnInput.ts:. and I don't want to use attr because it will stop that property from being passed down to nested directives. Is there anyway to pass this?

推荐答案

我是在您链接的问题上写下了可接受答案的人.没很久没和Angular一起工作过，请多多包涵，但是我做了一些故障排除工作，可能已经解决了.

I'm the one who wrote the accepted answer on the question you linked. Haven't worked with Angular in a looong time so bear with me, but I did some troubleshooting and possibly figured it out.

这绝对是一个继承物.我找到了这一个相关问题的答案:

It's definitely an inheritance thing. I found this answer to a relevant question:

如果一个类是从父类继承而未声明构造函数，则它将继承父类的构造函数以及该父类的参数元数据.

If a class inherits from a parent class and does not declare a constructor, it inherits the parent class constructor, and with it the parameter metadata of that parent class.

因为 RdnInputComponent 定义了自己的构造函数，所以它没有继承基类的装饰器元数据.如果删除构造函数，它会抱怨 BaseRdnInput 没有自己的装饰器，并像@Yngve B-Nilsen一样建议添加 @Directive().这似乎解决了 RdnInputComponent 是否具有构造函数的问题(请参见

Because RdnInputComponent defines its own constructor, it's not inheriting the decorator metadata of the base class. If you remove the constructor, it then complains that BaseRdnInput doesn't have its own decorator and suggests, as did @Yngve B-Nilsen, adding @Directive(). That appears to fix the issue whether RdnInputComponent has a constructor or not (see this stackblitz).

或者，仅将继承的绑定属性添加到 RdnInputComponent 元数据的 inputs 和 outputs "https://stackblitz.com/edit/angular-ivy-af8npe?file=src/app/app.component.ts" rel ="nofollow noreferrer"> stackblitz )，如下所示:

Alternatively, just adding the inherited binded properties to inputs and outputs of the RdnInputComponent metadata seems to work as well (stackblitz), like so:

@Component({
  selector: 'rdn-input',
  templateUrl: './rdn-input.component.html',
  inputs: ['rdnModel'],
  outputs: ['rdnModelChange']
})
export class RdnInputComponent extends BaseRdnInput {
// ...

希望有帮助！

这篇关于无法绑定到“属性X"，因为它不是“子组件"的已知属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！