AngularJs组件（Component）

组件负责控制屏幕上的一小块地方，我们称之为视图。

我们在类中定义组件的应用逻辑（它被用来为视图提供支持）。组件通过一些由属性和方法组成的API与视图交互。

例如：

HeroListComponent有一个 heroes属性，它返回一个“英雄”数组，这个数组是由一个服务的。 HeroListComponent

还有一个 selectHero()方法，当用户从列表中点选一个英雄时，就把它 / 她设置到 selectedHero属性。

export class HeroListComponent implements OnInit {

heroes: Hero[];

selectedHero: Hero;

constructor(private service: HeroService) { }

ngOnInit() {

thisheroes = thisservicegetHeroes();

}

selectHero(hero: Hero) { thisselectedHero = hero; }

}

当用户在这个应用中“移动”时，Angular会创建、更新和销毁组件，本应用的可以通过生命周期钩子在组件生命周期的各个时间点上插上自己的 *** 作，比如上面的声的ngOnInit();

因为在一个directive被link的时候，其内部的directive，是还没有被执行的。

对于ng-model这类的directive还好，那个元素是还在的。

而对于ng-repeat而言则不一样，为了优化，让ng-repeat只被compile一次，它会在compile阶段把这个节点摘除掉，单独compile一次，然后在发生数据绑定的时候对每个实例单独进行link。

用楼上同学的$timeout大法的确是可以的，不过个人不是很建议，因为这样就变成单次绑定了。

你这样获取子元素对于angular来说是非常不建议的，身为一个男人，你必须对ng-repeat的后果负责（雾），它是动态绑定的，意味着它里面的内容会变，如果你只获取一次，那它变了，你没响应，就是不负责任的表现。另一个，你的父directive里对其内容有依赖，这是非常糟糕的实践。

angular给你了一个监听变化的机会，是通过对数据变化的监听。其实是可行的，但是我也不建议这么用。一是在$watch当中你需要维护一个元素它是新的还是旧的，比如避免重复绑事件。二是这样对于$scope里的数据字段结构依然是耦合的，而且也没有解决DOM结构依赖的问题，你的父directive还是没有复用性可言。

所以个人建议如果一个directive是作为容器，那么它不应该对任何它的内容有依赖。如果是作为装饰者，应只作用于元素本身，而不作用于其子元素。

那么如果想实现一个轮播图slides怎么办？很明显slides的内容是很适合通过ng-repeat动态绑定的，我现在希望如果定义一个slides组件，它的内容就会被以轮播图的形式展现。这时候很明显是组件对其内容有依赖。

这里参考angular-ui-bootstrap当中的tabset实现举个例子：再定义一个名为slide-item的directive，在它的声明当中require: '^slides'，这样变成了子组件依赖父组件。在slides当中定义add, remove, select等API，在slide-item被link的时候调用其父的add来修改数据，并且再通过转交transclude函数的方式把自己的内容交给slides来处理。这样做到了：

1、slides可以动态包含任意多的slide-item

2、slide-item可以transclude任意的内容

从依赖关系上看，slide-item依赖slides完全没问题，声明了require还能在compile阶段得到angular的保护。slides要求其子元素必须用slide-item进行一次（几乎是透明的）包装，换来的是完全的动态绑定，也可以接受。与此同时，每一个slide-item只会被link一次，还能避免$watch的重复绑定事件这类问题，在它被transclude的时候读取它的DOM内容也是可行的。

（不过我还是要吐槽一下ui-bootstrap的tabset实现，因为为了最终用户代码简洁，生成的最终DOM结构和组件树相差甚远，中间transclude来transclude去的，不过也是为了将就bootstrap）。

总之，对于构建一套组件而言：

子组件可以依赖父组件，父组件不要依赖子组件

宁愿依赖数据，不要依赖DOM

宁愿依赖结构，不要依赖内容

一般来说，我们编写组件或者抽取组件的时候，总是会考虑到组件的复用性以及扩展性。当我们想让组件变成嵌套关系的时候，我们就需要考虑这个子组件是写死在父组件下面？还是抽取出来作为一个外部组件然后插入到父组件中？其实这个主要是看个人选择了。在angular中我们可以使用这两种方式封装组件。而 ViewChild 和 contentChild 这两个装饰器官网上面的定义是这样的：

其实，这两个装饰器其实就是为了获取子组件的引用而已，相当于vue和react中的ref。只不过angular这个可以通过 ViewChildren 或者 ContentChildren 来获取多个引用。这个所谓的 引用 或者angular的 视图查询 或者 内容查询 获取到的值其实是这个子组件生成出来的实例。我们可以像使用vue或者react似的使用这两个 查询 来直接修改子组件的属性或者调用子组件的方法。

接下来我会举一个例子来说明这两个（或者说四个）装饰器的用法。

ViewChild和ContentChild一开始了解不了就是因为一开始没有找到在vue或者react中对应什么api。其实就是相当于 ref 。只不过是写法有不同而已。当我们熟悉了之后，使用这两个（或者四个）其实就得心应手了。

以上就是关于AngularJs组件（Component）全部的内容，包括:AngularJs组件（Component）、求助，关于angular在指令中无法获取子元素的、【Angular】关于ViewChild和ContentChild的区别等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！