Question

假设我有两个单独的components。一个定义my-app元素，一个定义child元素。

我希望child组件是my-app（root）组件的依赖项。

这是怎么做到的？

myapp.component.js

(function(app) {
  app.AppComponent = ng.core
    .Component({
      selector: 'my-app',
      template: '<h1>My First Angular 2 App!!</h1>'
    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

child.component.js

(function(app) {
  app.ChildComponent = ng.core
    .Component({
      selector: 'child',
      template: '<h3>This is the child</h3>',

    })
    .Class({
      constructor: function() {}
    });
})(window.app || (window.app = {}));

Answer 1

实际上，它类似于我们在Typescript版本中所拥有的东西;-)。您需要配置提供程序：

在bootstrap方法
在providers属性

在使用ES5编写Angular2应用程序时，有两篇很棒的博客文章可以帮助您：

http://gurustop.net/blog/2015/12/16/angular2-beta-javascript-component
http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
http://blog.thoughtram.io/angular/2015/07/06/even-better-es5-code-for-angular-2.html

以下是仅使用ES5的完整工作示例：

index.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.umd.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-all.umd.dev.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <cmp>&lt;/cmp>
  </body>
</html>

服务的定义

var Service = function() {};
Service.prototype.greeting = function() {
  return 'hello';
};

组件的定义

var Cmp = 
  ng.core.Component({
    selector: 'cmp'
}).
View({
  template: '{{greeting}} world!'
}).
Class({
  constructor: [Service, function(service) {
    this.greeting = service.greeting();
  }]
});

引导Cmp组件作为应用程序组件

document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp);
});

应用程序级别的依赖注入。只需在bootstrap函数中添加第二个参数即可。它的值对应于包含Service对象的数组。
```
document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [Service]);
});
```

组件级别的依赖注入。只需在组件配置对象中添加providers属性即可。它的值是一个包含Service对象的数组。

var Cmp = ng.core.
Component({
  selector: 'cmp',
  providers: [Service]
}).
View({
  template: '{{greeting}} world!'
}).
Class({
  constructor: [Service, function(service) {
    this.greeting = service.greeting();
  }]
});

如果要在另一个组件中使用组件，只需利用视图的directives属性，如下所述。 CmpChild组件在Cmp内使用。

var CmpChild = ng.core.
  Component({
    selector: 'child'
  }).
  View({
    template: '{{greeting}} world!'
  }).
  Class({
    constructor: [Service, function(service) {
      this.greeting = service.greeting();
    }]
  });

var Cmp = ng.core.
  Component({
    selector: 'cmp'
  }).
  View({
    template: '<child></child>',
    directives: [CmpChild]
  }).
  Class({
    constructor: [Service, function(service) {

    }]
  });

希望它可以帮到你，亨利

ES5中Angular 2中的依赖注入

1 个答案: