Question

尝试使用属性从Angular2中配置WinJS控件，到目前为止我找不到解决方案，例如下面的代码抛出'无法绑定到'dataWinOptions'，因为它不是''元素'的已知属性。

@View({
    template: `<div id="rating" data-win-control='WinJS.UI.Rating' [data-win-options]='jsonRating'></div>`
})
class MyRating {
    rating: number;
    get jsonRating() {
        return '{averageRating: ' + this.rating + '}';
    } 
    constructor() {
        this.rating = 1.5;
    }
}

任何提示？

Answer 1

@ericdes关于你的最后评论我认为这将是最好的选择。假设你有Nth WinJS控件

请考虑以下代码。我在averageRating中为options属性指定了不同的值。

<winjs-control [options]="{averageRating: '1.5', someMoreOptions : 'x'}"></winjs-control>
<winjs-control [options]="{averageRating: '1.4', differentOptionsForThisOne :'Z'}"></winjs-control>
<winjs-control [options]="{averageRating: '1.3'}"></winjs-control>
<winjs-control [options]="{averageRating: '1.2'}"></winjs-control>
<winjs-control [options]="{averageRating: '1.1'}"></winjs-control>
// more and more...

该组件将读取此options属性并将其传递给视图。忘记指令，毕竟不是必要的。我们通过attr.data-win-options传递选项，因为它不是div的属性，而是属性。

@Component({
  selector : 'winjs-control',
  properties : ['options']
})
@View({
  template : `<div data-win-control="WinJS.UI.Rating" [attr.data-win-options]="jsonRating"></div>`,
})
class WinJSComponent implements OnInit, AfterViewInit {
  constructor() {}

  // We specify onInit so we make sure 'options' exist, at constructor time it would be undefined 
  // And we stringify it or otherwise it will pass an object, we need to convert it to a string
  onInit() {
    this.jsonRating = JSON.stringify(this.options);
  }

  // We process WinJS after view has been initialized
  // this is necessary or 'data-win-options' won't be fully processed
  // and it will fail silently...
  afterViewInit() {
    WinJS.UI.processAll();
  }
}

这里是plnkr for this case。

这是一个选项和恕我直言，我认为这是最简单的选择。另一个具有相同HTML内容的是将父母与其子女进行沟通，而我还没有用这种方法测试你的案例。

将WinJS与Angular2一起使用

1 个答案: