Question

我有一个Angular 2.47 alpha版本的组件，它看起来像这样：

@Component({
    selector: 'app',
    template: `
      <div class="col-md-4" *ngFor="#data of datas">
        <OtherComponent [dataDetails]="data"></OtherComponent>
        <br />
      </div>
    </div>
  `
})
export class App {
    datas: Array<Object> = [];
}

代码工作正常; data已按预期在循环中传递给OtherComponent。但是在我尝试移动到角度2测试版之前，它停止工作并开始抛出此错误：

Can't bind to 'dataDetails' since it isn't a known native property ("

我犯了错误吗？

Answer 1

这里有三个可能的问题，其中两个已被提及：

OtherComponent需要在directives

App

dataDetails需要在inputs

OtherComponent

假设这两个都是真的，您确定在OtherComponent之前加载了App吗？如果没有，则需要使用forwardRef：

替换：

@Component({
    selector: 'app',
    template: `...`,
    directives: [OtherComponent]
})

with：

@Component({
    selector: 'app',
    template: `...`,
    directives: [forwardRef(()=>OtherComponent) OtherComponent] //untested syntax
})

Answer 2

您需要通知Angular 2 OtherComponent存在。假设该类具有相同的名称，这就是您的Component装饰器应该是这样的：

@Component({
    selector: 'app',
    template: `...`,
    directives: [OtherComponent]
})

不相关的自定义标签名称不应该是驼峰式的，它们应该是kebab-case。当它们落入DOM时，它们会变成小写，这与您的代码不一致。此外，自定义标记名称应包含at least one dash。

如何在Angular 2中的组件之间传递数据？

2 个答案: