Angular2類沒有暴露功能

Question

我有這樣的模式：

(function(app) { 
    app.productLine = 
    ng.core.Component({ 
     selector: 'product-line', 
     templateUrl: 'templates/sales-product.html', 
    }) 
    .Class({ 
     constructor: function() { 
      this.products = [new app.product('101010101010101', '1', '19.99')]; 
     }, 

     addLine: function() { 
      this.products.push(new app.product('101010101010101', '1', '19.99')); 
     } 
    }); 

})(window.app || (window.app = {})); 

(function(app) { 
    app.product = function (upc, quantity, price) { 
     this.upc = upc; 
     this.quantity = quantity; 
     this.price = price; 
     return this; 
    } 
})(window.app || (window.app = {})); 

但是，我想不出如何公開addLine()這樣我就可以在其他地方調用它。

記錄PRODUCTLINE只能顯示構造：

console.log(app.productLine); 
function app.productLine<.constructor() 

，並呼籲app.productLine.addLine()給TypeError: app.productLine.addLine is not a function.

編輯：

我發現，添加addLine功能app.productLine直接做工作。當然，this的範圍會發生變化，所以需要在更明顯的位置引用構造函數的結果。您可以運行app.productLine.add(123,456,789);並更新型號。

但是，該視圖不會立即更新。我認爲有必要以某種方式觸發更新，但使用雙向數據綁定時，如果使用UI更新模型，則會顯示所有更新。

Answer 1

如果你想公開一個多個組件可以使用的共享函數，我建議實現一個服務並將它註冊到應用程序級注入器中。

Demo Plnkr

產品類別和ProductService

var Product = ng.core.Class({ 
    constructor: function (upc, quantity, price) { 
    this.upc = upc; 
    this.quantity = quantity; 
    this.price = price; 
    } 

}); 
var ProductService = ng.core.Class({ 
    constructor: function() { 
    this.products = [new Product('101010101010101', '1', '19.99')]; 
    }, 

    addLine: function() { 

     this.products.push(new Product('101010101010101', '1', '19.99')); 
    } 
}); 

註冊ProductService與應用程序級注射器

(function(app) { 
    document.addEventListener('DOMContentLoaded', function() { 
    ng.platform.browser.bootstrap(app.AppComponent, [ProductService]); 
    }); 
})(window.app || (window.app = {})); 

注漿ProductService在組件的構造方法d調用AddLine

(function(app) { 
    app.AppComponent = 
     ng.core.Component({ 
      selector: 'app', 
      directives: [app.ProductLine], 
      template: '<h1>Anguar 2</h1> <button (click)="addLine()">Add Line</button> <ul><li *ngFor="#product of service.products"><product-line [product]="product"></product-line></li></ul>' 
     }) 
    .Class({ 
     constructor: [ProductService, function (service) { 
      this.service = service; 
     }], 
     addLine: function() { 
      this.service.addLine(); 
     } 
    }); 
})(window.app || (window.app = {})); 

PRODUCTLINE指令與產品輸入綁定

該指令用於由父組件。

(function(app) { 
    app.ProductLine = 
     ng.core.Component({ 
      selector: 'product-line', 
      inputs: ['product'], 
      template: 'UPC:{{product.upc}}<br> Price:{{product.price}}<br>Qty:{{product.quantity}}', 
     }) 
     .Class({ 
      constructor: function() { 
      } 
     });  
})(window.app || (window.app = {})); 

ProductService是一個單身人士。任何組件都可以注入ProductService並呼叫AddLine()，並且任何綁定到products的組件都將自動更新爲默認更改檢測策略的一部分。

Answer 2

你試過：

var productLine = new app.productLine(); 
productLine.addLine(); 

在我看來，那是app.productLine應該被實例化的類。

啊不..從頭開始.. app.productLine是一個組件。別管我。我只知道打字稿中的angular2 :)。我不認爲我的解決方案會起作用，但你可以隨時嘗試。在打字稿中，您不要自己實例化組件。您只需將它們放入模板中（或使用dynamicLoader或Injector）即可。

但就像我說的。我不知道如何在你的情況下做到這一點