blocks|key|4446948|text|顾名思义，@ContentChild和@ContentChildren查询将返回存在于视图的<ng-content></ng-content>元素中的指令，而@ViewChild和@ViewChildren只直接查看视图模板中的元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4446949|entityMap^0|5|D|J|G|1A|P|27|A|2I|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|G|$]]

As the name suggests, <code>@ContentChild</code> and <code>@ContentChildren</code> queries will return directives existing inside the <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code> element of your view, whereas <code>@ViewChild</code> and <code>@ViewChildren</code> only look at elements that are on your view template directly.

blocks|key|4446901|text|这段来自Angular+Connect的视频提供了有关ViewChildren、ViewChild、ContentChildren和ContentChild+https://youtu.be/4YmnbGoh49U的精彩信息|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4446902|@Component({
++template:+`
++++<my-widget>
++++++<comp-a/>
++++</my-widget>
`
})
class+App+{}

@Component({
++selector:+'my-widget',
++template:+`<comp-b/>`
})
class+MyWidget+{}|code-block|syntax|javascript|4446903|从my-widget的角度来看，comp-a是ContentChild，comp-b是ViewChild。CompomentChildren和ViewChildren返回一个迭代器，而xChild返回一个实例。|style|CODE|4446904|entityMap|0|LINK|mutability|MUTABLE|url|https://youtu.be/4YmnbGoh49U^0|27|S|0|0|0|1|9|G|6|N|C|10|6|17|9|1H|H|1Z|C|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]|$A|12|B|13|K|L]|$A|14|B|15|K|L]|$A|16|B|17|K|L]|$A|18|B|19|K|L]|$A|1A|B|1B|K|L]|$A|1C|B|1D|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|1E|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

This video from Angular Connect has excellent info about ViewChildren, ViewChild, ContentChildren and ContentChild
<a href="https://youtu.be/4YmnbGoh49U" rel="noreferrer">https://youtu.be/4YmnbGoh49U</a>

<pre><code>@Component({
 template: `
 &lt;my-widget&gt;
 &lt;comp-a/&gt;
 &lt;/my-widget&gt;
`
})
class App {}

@Component({
 selector: 'my-widget',
 template: `&lt;comp-b/&gt;`
})
class MyWidget {}
</code></pre>

From <code>my-widget</code>'s perspective, <code>comp-a</code> is the <code>ContentChild</code> and <code>comp-b</code> is the <code>ViewChild</code>. <code>CompomentChildren</code> and <code>ViewChildren</code> return an iterable while the xChild return a single instance.

blocks|key|4447028|text|让我们举个例子，我们有一个home组件和一个子组件，并且在子组件内部有一个小的子组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4447029|<home>
+++++<child>
+++++++++++<small-child><small-child>
+++++</child>
</home>|code-block|syntax|javascript|4447030|现在您可以使用@viewChildren获取home组件上下文中的所有子元素，因为这些元素是直接添加到home组件的模板中的。但是，当您尝试从子组件的上下文访问<small-child>元素时，您无法访问它，因为它不是直接添加到子组件模板中的。它是由home组件通过内容投影添加到子组件中的。这就是@contentChild的用武之地，你可以用@contentChild抓住它。|offset|length|style|CODE|4447031|当您尝试访问控制器中的元素引用时，就会出现这种差异。您可以通过@viewChild访问grab所有直接添加到组件模板中的元素。但是你不能用@viewChild获取投影元素的引用来访问投影元素，你必须使用@contentChild。|4447032|entityMap^0|0|0|28|D|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Lets take a example, We have one home component and one child component and inside child component one small child component.
<pre><code>&lt;home&gt;
 &lt;child&gt;
 &lt;small-child&gt;&lt;small-child&gt;
 &lt;/child&gt;
&lt;/home&gt;
</code></pre>
Now you can grab all children elements in context of home component with @viewChildren because these are directly added in template of home component.
But, when you try to access <code>&lt;small-child&gt;</code> element from context of child component then you can't access it because it is not directly added within child component template.
It is added through content projection into child component by home component.
This is where @contentChild comes in and you can grab it with @contentChild.
The difference occur when you try to access elements reference in controller.
You can access grab all elements that are directly added into template of component by @viewChild.
But you can't grab projected elements reference with @viewChild
To access projected element you have to use @contentChild.

blocks|key|4447046|text|只需将ViewChildren重命名为InternalChildren，将ContentChildren重命名为ExternalChildren|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4447047|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Just rename ViewChildren to InternalChildren, and ContentChildren to ExternalChildren

Angular 2 provides <code>@ViewChild</code>, <code>@ViewChildren</code>, <code>@ContentChild</code> and <code>@ContentChildren</code> decorators for querying a component's descendant elements.

What's the difference between the first two and the latter two?

What's the difference between @ViewChild and @ContentChild?

Angular 2提供了@ViewChild、@ViewChildren、@ContentChild和@ContentChildren装饰器来查询组件的后代元素。前两个和后两个有什么不同？

问@ViewChild和@ContentChild有什么区别？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@ViewChild和@ContentChild有什么区别？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问@ViewChild和@ContentChild有什么区别？
EN