typescript - Angular 2.0 - @ViewQuery 和 @Query 有什么区别

Question

根据我在 Angular 2 documentation 中阅读的内容在 QueryList 中，@Query 应该允许将对子组件的引用注入(inject)给定组件的能力。

使用 @QueryView 我设法获得了对子 DOM 元素的引用，如下所示:

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

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

我预计 @Query 可能会返回匹配的组件而不是 DOM 元素，但我还没有设法让它工作，也没有找到任何表明如此的文档。

这两个装饰器有什么区别？

Answer 1

首先，您必须了解什么是 Light DOM 和 Shadow DOM。这些术语来自网络组件。所以here is the link .一般而言:

• Light DOM - 是组件的最终用户提供给组件的 DOM。
• Shadow DOM - 是组件的内部 DOM，它由您(作为组件的创建者) 并对最终用户隐藏。

我想，看下一个例子你可以很容易地理解什么是什么(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 { /* ... */ }

所以，你的问题的答案很简单:

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 该示例显示了简单的内容投影。但是<ng-content>可以做更复杂的事情。参见 this issue .