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的范围已经改变，因此需要在更明显的位置引用构造函数的结果。

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

            app.productLine.products = this.products;
        }
    });

  app.productLine.add = function (upc, quantity, price) {
        app.productLine.products.push({
            upc: upc,
            quantity: quantity,
            price: price
        });
  }

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

然后您可以运行app.productLine.add(123,456,789);并更新模型。

但是，视图不会立即更新。我认为有必要以某种方式触发更新，但是使用双向数据绑定，如果您使用UI更新模型，则会显示所有更新。

Answer 1

如果要公开多个组件可以使用的共享功能，我建议实现一个服务并将其注册到应用程序级注入器。

Demo Plnkr

产品类和产品服务

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并调用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是一个组件。别管我。我只知道typescript中的angular2 :)。我不认为我的解决方案会奏效，但您可以随时尝试。在打字稿中，您不必自己实例化组件。您只需将它们放在模板中（或使用dynamicLoader或Injector）即可。

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

Angular2类不暴露函数

2 个答案: