winjs - 集成 WinJS 和 Angular2

Question

我正在尝试包装 WinJS rating control在 Angular2 组件中。当我调试时，我可以看到正在调用和执行 WinJS.UI.processAll();。但是我没有看到评分控件。

我怎样才能让它发挥作用？

Dashboard.cshtml:

@{
    ViewBag.Title = "Dashboard";
}

<my-app></my-app>

<script src="/jspm_packages/system.js"></script>
<script src="/config.js"></script>

<script>
    System.import('reflect-metadata')
        .then(function () {
            System.import('angular2')
                .then(function () {
                    System.import("/js/app");
                });
        });
</script>

app.js:

import { Component, View, bootstrap } from 'angular2';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'my-app'
})
@View({
    template: '<div data-win-control=\'WinJS.UI.Rating\' data-win-options=\'{averageRating: 3.4}\'></div>'
})
class MyAppComponent {
    constructor() {
    }

    onInit() {
        WinJS.UI.processAll();
    }
}

bootstrap(MyAppComponent);

Answer 1

应@wonderfulworld 的要求

首先根据Adding the Windows Library for JavaScript to your page您必须将 css 文件添加到您的 html。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/winjs/4.3.0/css/ui-light.min.css">

第二件事，从 alpha37+ 开始，您必须导入并实现您正在使用的生命周期 Hook ，在本例中为 onInit(参见 remove LifecycleEvent)。

import { Component, View, bootstrap, OnInit} from 'angular2/angular2';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'my-app'
})
@View({
    template: '<div data-win-control=\'WinJS.UI.Rating\' data-win-options=\'{averageRating: 3.4}\'></div>'
})
class MyAppComponent implements OnInit {
    onInit() {
        WinJS.UI.processAll();
    }
}

就这样吧。这是 plnkr .

很高兴它有所帮助 ;)