使用纯 Javascript 绑定 Angular2 组件的一种方法答案

【问题标题】：One Way Binding Angular2 Component With Pure Javascript使用纯 Javascript 绑定 Angular2 组件的一种方法
【发布时间】：2016-08-05 00:20:34
【问题描述】：

我正在使用预期的 typescript 语言构建一个 angular2 应用程序，我在 3rd-party 打字方面遇到了很多问题，我正在努力处理这些 typescript 问题。所以我大胆地决定改为尝试使用纯 JavaScript。疯了吧？鉴于网络上的帮助极少。

但是除了一个例外，一切都很好，我无法通过一种方式绑定控件来工作。我正在使用 ES7 转译器，所以一些注释甚至可以工作！所以最终它看起来与打字稿非常相似（当然打字除外）。

应用组件html sn-p

<results [results]="results"></results>

结果组件

@Component({
    selector: 'results',
    templateUrl: '<div *ngFor="let result of results"><result [result]="result"></result></div>',
    directives: [ResultComponent]
})
export class ResultsComponent {
    @Input() results;
    constructor(){};
}

在 Typescript 中，这工作正常。我的 ResultsComponent 中的 results 属性将设置为应用程序组件中设置的值。在纯 javascript 版本中结果为 null。代码正在对 @Input 装饰器做出反应，因为如果我把它拿走，它会抱怨它丢失了

例外：模板解析错误：无法绑定到“结果”，因为它不是已知的原生属性

但不知何故，数据没有通过。有什么想法吗？

【问题讨论】：

标签： javascript data-binding angular

【解决方案1】：

感谢this link，我在组件装饰器的输入部分找到了答案。我变了……

@Component({
    selector: 'results',
    templateUrl: '<div *ngFor="let result of results"><result [result]="result"></result></div>',
    directives: [ResultComponent]
})
export class ResultsComponent {
    @Input() results;
    constructor(){};
}

...到...

@Component({
    selector: 'results',
    templateUrl: '<div *ngFor="let result of results"><result [result]="result"></result></div>',
    directives: [ResultComponent],
    inputs: ['results']
})
export class ResultsComponent {
    constructor(){};
}

...现在可以使用了！

【讨论】：