使用WinJS和Angular2

嘗試使用屬性來配置Angular2中的WinJS控件，到目前爲止我找不到解決方案，例如，下面的代碼拋出'無法綁定到'dataWinOptions'，因爲它不是''元素'的已知屬性。使用WinJS和Angular2

@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; 
    } 
}

任何提示？

來源

2015-09-29 ericdes

試試這個plnkr：http://plnkr.co/edit/aTd2x8?p=preview –

我知道你創建了一個類來爲'div'標籤添加'dataWinOptions'屬性。但是我想使用幾個WinJS控件，它們都通過相同的'data-win-options'屬性使用不同的配置模型。 – ericdes

E.g.如果我還想在Angular2中爲其他WinJS控件配置'data-win-options'，會發生什麼？ '

' – ericdes

@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內容的人會將父母與子女溝通，而我沒有用這種方法測試你的案例。

來源

2015-09-30 15:30:38

是的！感謝'attr.data-win-options'中的神奇'attr'，我可以隨意設置選項。雖然我沒有看到它，但是這個'attr'是什麼意思？ – ericdes

這是一個[cheatsheet]（https://docs.google.com/document/d/19jHbsXeYj2QiZ-cGS_mA3nyaU86gLeonjU2Tfzm1J5Y/edit），以及這些問題：[＃4438]（https://github.com/angular/angular/issues/4438）和[＃773]（https://github.com/angular/angular/issues/773） –

使用WinJS和Angular2

回答

相關問題