Angular2中的组件

Angular 中的组件 - 图1

任何Angular 2应用程序的核心理念是组件。实际上,整个应用程序可以被建模为这些组件的树。

这是Angular 2团队定义组件的方式:

组件控制一个屏幕空间的补丁,我们可以调用视图,并为应用程序声明可重用的UI构建块。

基本上,组件是最终用户可见的任何东西,并且可以在应用程序中重复使用多次。

在Angular1.x中,我们有路由器视图和指令,其工作类似于组件。指令组件的想法变得相当受欢迎。它们是通过使用控制器的指令创建的,同时依赖于controllerAs和bindToController属性。例如:

  1. angular.module('ngcourse')
  2. .directive('ngcHelloComponent', () => ({
  3. restrict: 'E',
  4. scope: { name: '=' },
  5. template: '<span>Hello, {{ ctrl.name }}.</span>',
  6. controller: MyComponentCtrl,
  7. controllerAs: 'ctrl',
  8. bindToController: true
  9. })
  10. );

事实上,这个概念变得如此受欢迎,在Angular 1.5中,.component方法被引入作为语法糖。

  1. angular.module('ngcourse')
  2. .component('ngcHelloComponent', {
  3. bindings: { name: '=' },
  4. template: '<span>Hello, {{ $ctrl.name }}.</span>',
  5. controller: MyComponentCtrl
  6. });