将 WinJS 与 Angular2 一起使用

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 关于你最后的评论我认为这是最好的选择。假设你有第 N 个 WinJS 控件

考虑以下代码。我在 options.

中为 averageRating 属性指定了不同的值

<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 内容的方法是将 parent 与其 children 进行通信，我尚未使用该方法测试您的情况。

将 WinJS 与 Angular2 一起使用

Using WinJS with Angular2

winjs

angular