無法綁定到“屬性 X”，因為它不是“子組件”的已知屬性

Question

在我的項目中，我有一個通用的 class 和其他一些繼承自它的組件。

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>

通過這行代碼，我得到了這個錯誤：

無法綁定到“rdnModel”，因為它不是“rdn-input”的已知屬性。

1. 如果“rdn-input”是 Angular 組件並且它具有“rdnModel”輸入，則驗證它是否是該模塊的一部分。
2. 如果“rdn-input”是 Web 組件，則將“CUSTOM_ELEMENTS_SCHEMA”添加到該組件的“@NgModule.schemas”以禁止顯示此消息。
3. 要允許任何屬性，請將“NO_ERRORS_SCHEMA”添加到此組件的“@NgModule.schemas”。

在我升級之前它工作正常。 我的問題與這個問題非常相似：Angular2 RC5: Can't bind to 'Property X' because it is not a known property of 'Child Component' 。 我知道有一些設置可以避免這個錯誤，最重要的是：檢查我們是否將@input 添加到 sub class 的屬性或添加 attr 到 parent 的 biding 屬性。 如果您看到我已經在BaseRdnInput.ts:中添加了@input 。 而且我不想使用 attr 因為它會阻止該屬性被傳遞給嵌套指令。 有沒有辦法通過這個？

Answer 1

我是在您鏈接的問題上寫下公認答案的人。 很久沒有使用 Angular 了，所以請耐心等待，但我做了一些故障排除，可能已經解決了。

這絕對是 inheritance 的事情。 我找到了一個相關問題的答案：

如果 class 繼承自父 class 並且未聲明構造函數，則它繼承父 class 構造函數，以及該父 ZA2F2ED4F2ED49DC8 的參數元數據。

因為RdnInputComponent定義了自己的構造函數，所以它沒有繼承基礎 class 的裝飾器元數據。 如果您刪除構造函數，它會抱怨BaseRdnInput沒有自己的裝飾器，並建議像 @Yngve B-Nilsen 一樣添加@Directive() 。 這似乎解決了RdnInputComponent是否有構造函數的問題（參見這個stackblitz ）。

或者，僅將繼承的綁定屬性添加到RdnInputComponent元數據的inputs和outputs似乎也可以正常工作（ stackblitz ），如下所示：

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

希望有幫助！

Answer 2

你需要用@Directive()來裝飾你的基礎 class - 而不是@Injectable