javascript - Angular 2 beta.8 如何使用@Query？

Question

我正在尝试使用 @Query获取有关我的模板中某个元素的一些信息。但我似乎无法让它发挥作用。

我试过这样做:Documented here我的看起来像这样，

import {Component, Query, QueryList, ElementRef} from 'angular2/core';

@Component({
    selector : 'my-app',
    template : `
        <banner #banner>
            <h4>Some New App</h4>
        </banner>
        <div class="container"></div>
    `
})

export class App
{
    private banner:any;

    constructor(@Query('banner') banner:QueryList<ElementRef>)
    {
        this.banner = banner;
    }

    ngOnInit()
    {
        console.log(this.banner)
    }
}

控制台日志显示:

现在我在这里可能是错的。但我希望 _results: Array[0]有一个结果。我希望它包含一些关于 <h4> 的信息元素。

考虑到这一点。我尝试按照文档以几种不同的方式进行操作。我见过一些人使用烤肉盒，一些人使用 Camel 等。所以我想也许文档还没有更新。

经过更多搜索，我发现了这个 https://github.com/angular/angular/issues/3922

有@Query已更改为此语法？

@ContentChild()和 @ViewChildren()

无论哪种方式，我的问题是从今天开始执行此操作的正确方法是什么？或者我只是在这里完全遗漏了什么？

Answer 1

@Query 等同于 @ContentChild/@ContentChildren(通过 ng-content 投影的元素)因此它不会工作查询 View 中的元素。你想要的是 @ViewQuery()。也就是说，您最好不要使用 @Query 或 @ViewQuery，因为 API will be removed .

这是您更正的代码

import {Component, ViewChildren, QueryList, ElementRef} from 'angular2/core';

@Component({
    selector : 'my-app',
    template : `
        <banner #banner>
            <h4>Some New App</h4>
        </banner>
        <div class="container"></div>
    `
})
export class App {

    @ViewChildren('banner') banner: QueryList<ElementRef>;

    ngAfterViewInit() {
        console.log(this.banner)
    }
}

这是一个 plnkr使用当前 API 的示例。