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）即可。

但就像我说的。我不知道如何在你的情况下做到这一点