Angular 2 aot 无法绑定到 X，因为它不是 Y 的已知属性答案

【问题标题】：Angular 2 aot cannot bind to X since it isn't a known property of YAngular 2 aot 无法绑定到 X，因为它不是 Y 的已知属性
【发布时间】：2017-04-06 08:03:51
【问题描述】：

参考下面的代码，不管我用<dform [meta]="frmeta"></dform>还是<dform meta="{{frmeta}}"></dform>都会报错提示

无法绑定到 'meta'，因为它不是 'dform' 的已知属性。"

在编译打字稿代码时。有人知道我的代码有什么问题吗？

DformComponent.ts

import { Component, Attribute } from '@angular/core';
import {FormBuilder, Validators} from '@angular/forms';

@Component({
    selector:'dform',
    templateUrl:'DformComponent.html'
})
export class DformComponent{
  frmdata:any;

  constructor(fb:FormBuilder, @Attribute('meta') public meta:any){
    // this.frmdata = fb.group({
    //   phone:["123456789", containsMagicWord]
    //   , ip:["192.168.137.169", containsMagicWord]
    // });
    console.log(this.meta);
    debugger;
    this.frmdata = fb.group(this.meta);
  }

  dosubmit(event:any){
    console.log(this.frmdata.value);
  }
}

DformComponent.html

<form [formGroup]="frmdata" (submit)="dosubmit($event)">
    <inputmask formControlName="phone" mask="(___) ___ - ___"></inputmask>
    <inputmask formControlName="ip" mask="___.___.___.___" ></inputmask>
    <button type="submit">Post</button>
    <pre>{{ frmdata.value|json }}</pre>
</form>

RootComponent.ts

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

function containsMagicWord(c: any) {
  if(c.value.indexOf('magic') >= 0) {
    return {
      noMagic: true
    }
  }

  // Null means valid, believe it or not
  return null
}

@Component({
  selector: 'body',
  templateUrl: 'RootComponent.html'
})
export class RootComponent {
  frmeta:any = {
      phone:["123456789", containsMagicWord]
      , ip:["192.168.137.169", containsMagicWord]
  };
  constructor(){

  }
}

RootComponent.html

<dform meta="{{frmeta}}"></dform>

【问题讨论】：

请添加准确的错误信息。 X 和 Y 没有帮助。
已添加，请查看。
[meta]="frmeta" 的意图或预期行为是什么？
我打算动态创建表单元素。 RootComponent.meta 包含与上面注释代码完全相同的代码 console.log(this.meta) 一个对象将从 RootComponent 传递到 DformComponent 以使用 FormBuilder 构建表单。
但是[meta]="frmeta" 应该做什么。该组件没有@Input() meta;

标签： angular data-binding angular-ngmodel angular-components

【解决方案1】：

您需要将DformComponent添加到

@NgModule({
  ...,
  declarations: [DformComponent]

组件需要一个

@Input() meta:SomeType;

为

[meta]="frmeta"

有效。

【讨论】：