角2.0​​ - 有什么@ViewQuery和@Query之间的区别 [英] Angular 2.0 - What's the difference between @ViewQuery and @Query

问题描述

这是我在角2文档读过的 QueryList ， @Query 应允许注入到子组件的引用到一个给定的能力组件。

From what I've read in the Angular 2 documentation of QueryList, @Query should allow for the ability to inject a reference to a child component into a given component.

使用 @QueryView 我已经成功地得到像这样子DOM元素的引用：

Using @QueryView I've managed to get a reference to a child DOM element like so:

// Parent component's template
<my-component #test>

// Parent component
class ParentComponent {
  constructor(@Query('test') child: QueryList<any>) {...}
}

我预计， @Query 可返回匹配的组件，而不是DOM元素，但我还没有设法得到它的工作，也没有我发现任何文档表明左右。

I expected that @Query may return the matching component rather than the DOM element, but I haven't managed to get it working, nor have I found any documentation that indicates so.

有什么这两个装饰之间的区别？

What's the difference between these two decorators?

推荐答案

首先，你必须了解什么是光DOM和暗影DOM。这些术语都来自Web组件。所以在这里是链接。一般来说：

First, you must understand what are the Light DOM and Shadow DOM. These terminologies have come from web components. So here is the link. In general:

• 轻型DOM 的 - 就是的DOM组件供应到组件的终端用户


• 阴影DOM 的 - 是定义的由您（组件的内部DOM作为组件的创< /强>）和从最终用户隐藏。

• Light DOM - is the DOM that the end-user of your component supply into your component.
• Shadow DOM - is the internal DOM of your component that is defined by you (as a creator of the component) and hidden from the end-user.

我想，看着下面的例子中，你可以很容易地理解什么是什么（这里是plunker ）：

I think, looking at the next example you can easily understand what is what (here is the plunker):

@Component({
  selector: 'some-component'
})
@View({
  template: `
    <h1>I am Shadow DOM!</h1>
    <h2>Nice to meet you :)</h2>
    <ng-content></ng-content>
  `;
})
class SomeComponent { /* ... */ }

@Component({
  selector: 'another-component'
})
@View({
  directives: [SomeComponent],
  template: `
    <some-component>
      <h1>Hi! I am Light DOM!</h1>
      <h2>So happy to see you!</h2>
    </some-component>
  `
})
class AnotherComponent { /* ... */ }

所以，对你问题的答案是pretty简单：

So, the answer for you question is pretty simple:

查询之间的区别和 ViewQuery 是查询寻找光在DOM元素，而 ViewQuery 在阴影DOM找他们。

The difference between Query and ViewQuery is that Query is looking for elements in Light DOM while ViewQuery is looking for them in Shadow DOM.

PS 的例子展示了简单的内容投影。但＆LT;纳克含量＆GT; 可以做更复杂的事情。请参见这个问题。

PS The example shows simple content projection. But <ng-content> can do much more complex things. See this issue.

这篇关于角2.0​​ - 有什么@ViewQuery和@Query之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！