带ES5的Angular 2中的依赖项注入_Angular_Dependency Injection

带ES5的Angular 2中的依赖项注入

angular dependency-injection

带ES5的Angular 2中的依赖项注入,angular,dependency-injection,Angular,Dependency Injection,假设我有两个独立的组件。一个定义myapp元素，一个定义child元素我希望子组件是我的应用程序（根）组件的依赖项这是怎么做到的 myapp.component.js (function(app) { app.AppComponent = ng.core .Component({ selector: 'my-app', template: '<h1>My First Angular 2 App!!</h1>' })

假设我有两个独立的

组件。一个定义myapp
元素，一个定义child
元素
我希望子组件
是我的应用程序
（根）组件的依赖项
这是怎么做到的
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 = {}));

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

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

（功能（应用程序）{
app.AppComponent=ng.core
.组成部分({
选择器：“我的应用程序”，
模板：“我的第一个Angular 2应用！！”
})
.类({
构造函数：函数（）{}
});
})（window.app | |（window.app={}））；

child.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 = {}));

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

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

（功能（应用程序）{
app.ChildComponent=ng.core
.组成部分({
选择器：'子'，
模板：“这是孩子”，
})
.类({
构造函数：函数（）{}
});
})（window.app | |（window.app={}））；
事实上，它与我们在Typescript版本中的内容类似；-）。您需要配置提供程序：

在引导
方法中的应用程序级别
在提供程序
属性内的组件级别

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

梅利吉
帕斯卡·普雷希特
帕斯卡·普雷希特

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

index.html用于包含JavaScript文件
<!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 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);
});


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

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


组件级依赖项注入。只需在组件配置对象中添加一个providers
属性。它的值是包含服务
对象的数组
document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp, [Service]);
});

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



如果要在另一个组件中使用组件，只需利用视图的指令
属性，如下所述。CmpChild
组件在Cmp
one中使用
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) {

    }]
  });

var CmpChild=ng.core。
组成部分({
选择器：“孩子”
}).
看法({
模板：“{{问候语}}}世界！”
}).
阶级({
构造函数：[服务，功能（服务）{
this.greeting=service.greeting（）；
}]
});
var Cmp=ng.core。
组成部分({
选择器：“cmp”
}).
看法({
模板：“”，
指令：[CmpChild]
}).
阶级({
构造函数：[服务，功能（服务）{
}]
});

希望它能帮助你，
Thierry
我不知道如何使用.js，但您必须在父组件中导入子组件才能使用它。此外，您还提供了@component注释中指令列表中的组件。然后，您可以轻松地在父组件中使用该子组件。我希望你能从中得到一些线索。是的，如果您需要，我将提供父子组件使用示例作为答案。但是在es5中，您没有注释