Angular 2提供了@ViewChild
、@ViewChildren
、@ContentChild
和@ContentChildren
装饰器来查询组件的后代元素。
前两个和后两个有什么不同?
发布于 2015-12-17 12:41:21
顾名思义,@ContentChild
和@ContentChildren
查询将返回存在于视图的<ng-content></ng-content>
元素中的指令,而@ViewChild
和@ViewChildren
只直接查看视图模板中的元素。
发布于 2016-02-25 07:44:09
这段来自Angular Connect的视频提供了有关ViewChildren、ViewChild、ContentChildren和ContentChild https://youtu.be/4YmnbGoh49U的精彩信息
@Component({
template: `
<my-widget>
<comp-a/>
</my-widget>
`
})
class App {}
@Component({
selector: 'my-widget',
template: `<comp-b/>`
})
class MyWidget {}
从my-widget
的角度来看,comp-a
是ContentChild
,comp-b
是ViewChild
。CompomentChildren
和ViewChildren
返回一个迭代器,而xChild返回一个实例。
发布于 2019-10-23 20:02:27
让我们举个例子,我们有一个home组件和一个子组件,并且在子组件内部有一个小的子组件。
<home>
<child>
<small-child><small-child>
</child>
</home>
现在您可以使用@viewChildren获取home组件上下文中的所有子元素,因为这些元素是直接添加到home组件的模板中的。但是,当您尝试从子组件的上下文访问<small-child>
元素时,您无法访问它,因为它不是直接添加到子组件模板中的。它是由home组件通过内容投影添加到子组件中的。这就是@contentChild的用武之地,你可以用@contentChild抓住它。
当您尝试访问控制器中的元素引用时,就会出现这种差异。您可以通过@viewChild访问grab所有直接添加到组件模板中的元素。但是你不能用@viewChild获取投影元素的引用来访问投影元素,你必须使用@contentChild。
https://stackoverflow.com/questions/34326745
复制相似问题