基本组件和 LifeCycle 挂钩

什么是组件？

• 组件基本上是一个使用更简单配置的指令，适用于基于组件的体系结构，这是 Angular 2 的全部内容。将组件视为窗口小部件：你可以在 Web 应用程序的多个不同位置重用的 HTML 代码片段。

零件

angular.module('myApp', [])
    .component('helloWorld', {
        template: '<span>Hello World!</span>'
    });

标记

<div ng-app="myApp"> 
  <hello-world> </hello-world>
</div>

现场演示

在组件中使用外部数据：

我们可以添加一个参数来将名称传递给我们的组件，其使用方法如下：

angular.module("myApp", [])
  .component("helloWorld",{
    template: '<span>Hello {{$ctrl.name}}!</span>',
    bindings: { name: '@' }
  });

标记

<div ng-app="myApp"> 
  <hello-world name="'John'" > </hello-world>
</div>

现场演示

在组件中使用控制器

我们来看看如何添加一个控制器。

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      controller: function(){
        this.myName = 'Alain';
      }
  });

标记

<div ng-app="myApp">  
  <hello-world name="John"> </hello-world>
</div>

CodePen 演示

在 Angular 调用 $onInit 函数之前，传递给组件的参数在控制器的作用域中可用。考虑这个例子：

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      controller: function(){
        this.$onInit = function() {
          this.myName = "Mac" + this.name;
        }
      }
  });

在上面的模板中，这将呈现“Hello John，我是 MacJohn！”。

请注意，$ctrl 是 controllerAs 的 Angular 默认值（如果未指定）。

现场演示

使用 require 作为对象

在某些情况下，你可能需要从组件内的父组件访问数据。

这可以通过指定我们的组件需要父组件来实现，require 将为我们提供所需组件控制器的引用，然后可以在我们的控制器中使用，如下例所示：

请注意，只有$ onInit 挂钩后才能保证所需的控制器就绪。

angular.module("myApp", [])
  .component("helloWorld",{
      template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
      bindings: { name: '@' },
      require: {
        parent: '^parentComponent'
      },
      controller: function () {
        // here this.parent might not be initiated yet

        this.$onInit = function() {
           // after $onInit, use this.parent to access required controller
           this.parent.foo();
        }

      }
  });

但请记住，这会在孩子和父母之间产生紧密的联系。